2016-08-08 8 views
8

現在、htmlselectタグのレンダリングの問題に直面しています。私はいくつかのselectタグを持っています。そのうちの1つはselectタグのオプションは静的ですが、もう1つのselectタグのオプションは動的で、jQueryを使用しています。HTML選択タグレンダリングの問題

私はMotorola ES400デバイスでinternet explorer 6 mobileブラウザを使用しています。

私のWebページが、それはこのように表示されるよりも、画面上にロードされている:[![ここに画像の説明を入力] [1]]ここで

[1]

私の最初のselectタグは静的であり、別の3つの選択タグのオプションタグがjQueryを使用して生成されています。

私は個人的に再レン​​ダリングの問題が原因で発生する可能性があると感じています。

私はそれは大丈夫表示することをWebページスクロールする場合:[![ここに画像の説明を入力します] [2]]:

[2]

を私はselectタグについては、以下のCSSを使用しています ページを更新

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

Please click here for the JSFiddle

+0

を行う前に、あなたのコードやフィドルのリンクを投稿してください。 – Jainam

+0

@Jainamご返信ありがとうございます、2分してください。 –

+0

@Jainam、時間をかけて申し訳ありません。私のフィドルURLはここにあります:https://jsfiddle.net/3tj4wn74/1/ –

答えて

0

(あまりにも明確なキャッシュ):)問題を解決することがあり

+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>

+0

ありがとう@Abhishek、 ':before'と':after'は 'IE6'でサポートされていません。こちらを確認してください:http://caniuse.com/#search=%3Abefore、しかし、助けてくれてありがとうあなたの上記のCSSで起こっている? –