web-dev-qa-db-ja.com

IE10 Select Element Arrowの削除

だから、MozillaとWebKitでは、appearance: none;を使用して親要素を持つselectボックスの矢印を置き換えるまともなソリューションがあります。

IEでは、ほとんどの場合、この機能を無効にしました。 IE10では、条件付きコメントが実際に機能しないため、実際に無効にすることはできません。

これが私のマークアップです。

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)]>    <html class="ie10plus"> <![endif]-->
<!--[if !(IE)]><!--> <html> <!--<![endif]-->

クラスie10plusは、実際にはマークアップに到達しません。

また、IEの矢印を置き換える正当な方法があるかもしれないと感じています。私は実際に問題を解決することに反対していません。 appearance: none;ただし機能しません。ここで何ができますか？

css3internet-explorer-10conditional-statements
74
Parris

ブラウザのスニッフィングや条件付きコメント（Internet Explorer 10ではサポートされていません）を避け、代わりに、より標準的なアプローチを採用してください。この特定の問題では、 ::-ms-expand 疑似要素をターゲットにする必要があります。

select::-ms-expand {
    display: none;
}
292
Sampson

しかし、！幅を追加したい場合、次のようにすることはできません：

display:none

そう

select::-ms-expand {
 /* IE 8 */
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 /* IE 5-7 */
 filter: alpha(opacity=0);
 /* Good browsers :) */
 opacity:0;
}
2
Sergey

Internet Explorer 10は条件付きコメントをサポートしていません なので、何か他のことをする必要があります。 1つの解決策は、JavaScriptを使用してユーザーエージェントをスニッフィングし、自分でクラスを追加することです。

<script>
if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
    document.documentElement.className += " ie10";
}
</script>

おそらくこれを<head>に追加して、スタイル設定されていないコンテンツのフラッシュがないようにする必要がありますが、それは問題ではないかもしれません。

また、jQueryを使用している場合は、次のようなことをすることもできます。

if (navigator.userAgent.indexOf("MSIE 10.0") !== -1) {
    $("html").addClass("ie10");
}

IE10以上を確認する場合は、getInternetExplorerVersion関数をコピーアンドペーストします このMicrosoftページから し、ifを次のように変更します。

if (getInternetExplorerVersion() >= 10) {
    // whatever implementation you choose
}
1
Evan Hahn

IE 10および11のサイトで、Zurb Foundationを使用して作業している非表示のドロップダウン矢印に問題がありました。 _form.scssにある行がありました

select::-ms-expand {
    display: none;
}

Iremovedそれと、すべてのブラウザでドロップダウン矢印が正常に表示されるようになりました。ここであなたの答えをジョナサンありがとう。これは、解決策をたくさん探した後、私を助けました。

0
ranjeesh