HTML选择标签渲染问题

Posted 2023-03-06

【中文标题】HTML选择标签渲染问题

【英文标题】：HTML select tag rendering issue

【发布时间】：2016-12-13 19:07:57

【问题描述】：

目前，我面临html select 标签中的渲染问题。我有几个select 标签，其中一个select 标签的选项是静态的，但另一个select 标签的选项是动态的，它使用jQuery 填充。

我在Motorola ES400 设备中使用internet explorer 6 mobile 浏览器。

当我的网页加载到屏幕上时，它会显示如下：

这里我的第一个选择标签是静态的，另外三个选择标签的选项标签是使用 jQuery 生成的。

个人感觉可能是重渲染的问题造成的。

如果我滚动显示正常的网页：

我为选择标签使用了以下 CSS：

    width               : 240px;
    height              : 24px;
    border              : 1px solid #cccccc;
    vertical-align      : middle;

Please click here for the JSFiddle

【问题讨论】：

请发布您的代码或小提琴链接。

@Jainam 感谢您的回复，请 2 分钟。

@Jainam，很抱歉耽误您的时间。我的小提琴网址在这里：jsfiddle.net/3tj4wn74/1

【参考方案1】：

试试这是使用 :after 和 :before 来解决问题

body, html background:#444; text-align:center; padding:50px 0;

/* The CSS */
select 
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: #f8f8f8;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;


/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) 
    select padding-right:18px


label position:relative
label:after 
    content:'<>';
    font:11px "Consolas", monospace;
    color:#aaa;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;

label:before 
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;

<label>
    <select>
        <option selected> Select Box </option>
        <option>Short Option</option>
        <option>This Is A Longer Option</option>
    </select>
</label>

【讨论】：

谢谢@Abhishek，IE6 不支持:before 和:after 请在此处查看：caniuse.com/#search=%3Abefore，但感谢您的帮助，您能否解释一下您的上面的css？

【参考方案2】：

刷新页面可能会解决问题:)（也清除缓存）

【讨论】：

是的，我知道，我也在我的问题中写道，当我滚动页面时它会自动修复，不需要刷新页面，我对客户说的话“请先稍微滚动页面以解决此问题”？