HTML选择标记呈现问题

时间:2016-08-08 05:33:39

标签: jquery html css internet-explorer windows-mobile

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

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

当我的网页加载到屏幕上时,显示如下:

[![在此处输入图像说明] [1]] [1]

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

我个人认为,由于重新渲染问题,可能会发生这种情况。

如果我滚动网页显示正常:

[![在此处输入图像说明] [2]] [2]

我使用以下CSS作为select标记:

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

Please click here for the JSFiddle

2 个答案:

答案 0 :(得分:1)

尝试这是用途:之后和:之前做的伎俩

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>

答案 1 :(得分:0)

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