Vấn đề hiển thị thẻ chọn HTML

Question

Hiện tại, tôi đang gặp sự cố hiển thị trong thẻ htmlselect. Tôi có ít thẻ select, trong đó tùy chọn của một thẻ là select là tĩnh nhưng tùy chọn khác của thẻ select là động, được điền bằng cách sử dụng jQuery.

Tôi đang sử dụng trình duyệt internet explorer 6 mobile trong thiết bị Motorola ES400.

Khi trang web của tôi được nạp trên màn hình hơn nó hiển thị như thế này:

[! [Nhập mô tả hình ảnh ở đây] [1]] [1]

Ở đây chọn thẻ đầu tiên của tôi là tĩnh và thẻ tùy chọn của một thẻ lựa chọn khác được tạo bằng cách sử dụng jQuery.

Cá nhân tôi cảm thấy rằng điều đó có thể xảy ra do sự cố hiển thị lại.

Nếu tôi di chuyển các trang web mà nó hiển thị okay:

[2]

Tôi đang sử dụng CSS sau đây cho thẻ chọn [[nhập hình ảnh mô tả ở đây] [2]!]:

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

Please click here for the JSFiddle

Answer 1

Refreshing trang có thể khắc phục vấn đề :) (bộ nhớ cache rõ ràng quá)

Answer 2

Hãy thử điều này là sử dụng: sau và: trước khi làm các trick

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>