目前,我正面临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;
答案 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)
刷新页面可能会解决问题:)(清除缓存)