1

IE7+ で点線のアウトラインを取り除くことができません。追加しましoutline:none; border:noneたが、どのバージョンの IE でも動作しません。

フィドルを作成しました。IE でフィドル エイジを実行すると正常に動作しますが、同じコードを HTML ページに貼り付けると動作しません。ここにフィドルがありますhttp://jsfiddle.net/6Ayek/4/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Photos Tab</title>
<style type="text/css">
/* Generated by F12 developer tools. This might not be an accurate representation of the original source file */
#contentContainer { BACKGROUND-IMAGE: url(/s/store/-1/common/gb/Media-Console/popup_bg.jpg); WIDTH: 636px; HEIGHT: 460px; OVERFLOW: auto}
#leftNavigation {   PADDING-LEFT: 15px; WIDTH: 125px; PADDING-RIGHT: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; FLOAT: left; FONT-SIZE: 12px}
#leftNavigation ul {PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px}
#leftNavigation ul li { WIDTH: 125px; DISPLAY: block;  outline:none !important;}
#leftNavigation ul li a {LINE-HEIGHT: 30px;  DISPLAY: block; FONT-FAMILY: Arial, Helvetica, sans-serif; COLOR: #2c2f30; FONT-SIZE: 12px;; TEXT-DECORATION: none; outline:none !important;}
#leftNavigation ul li a:visited {   COLOR: #2c2f30; outline:none !important; border:none}
#leftNavigation ul li a:hover { COLOR: #000000;  outline:none !important; border:none}
.currentSelection { BORDER-BOTTOM: #0076a3 1px solid; BORDER-LEFT: #0076a3 1px solid; LINE-HEIGHT: 25px; OUTLINE-STYLE: none; OUTLINE-COLOR: invert; PADDING-LEFT: 10px; OUTLINE-WIDTH: medium; DISPLAY: inline-block; BACKGROUND: #0095cd; BORDER-TOP: #0076a3 1px solid; FONT-WEIGHT: bold; BORDER-RIGHT: #0076a3 1px solid; TEXT-DECORATION: none; BEHAVIOR: url('/s/store/-1/common/gb/Media-Console/PIE.htc'); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
}   
</style>
 </head>    
<body>
<div id="leftNavigation">
    <ul>
    <li><a href="#" style="color: white; " class="currentSelection">test</a></li>
    <li><a href="#" style="color: black; ">test 2</a></li>
    <li><a href="#" style="color: black; ">test 2</a></li>
    <li><a href="#" style="color: black; ">test 2</a></li>
    <li><a href="#" style="color: black; ">test 2</a></li>
    </ul>
</div>
</body> 
</html>
4

3 に答える 3

3

これには、短いCSSルールが1つだけ必要です。

a { outline: none }

HTMLページで機能しない理由に答えることは不可能ですが、これはアウトラインを削除するための正しいCSSコードです。

点線の境界線は、キーボードやその他の楽器をナビゲートする人に役立つため、この手法はアクセシビリティにあまり適していません。より良いアプローチは、このjQueryスニペットです。

(function($) {
    $(document).on('mousedown mouseup', 'a', function(e) {
        if ('hideFocus' in this) { // IE
            this.hideFocus = e.type == 'mousedown';
        }
        this.blur();
    });
}(jQuery));

アップデート

私IE7はあなたの質問の一部を読み間違えました...あなたは追加してみることができます：

a:focus{
    noFocusLine: expression(this.onFocus=this.blur());
}

しかし、最善の解決策は、jQuery/javascriptアプローチです。

于 2012-10-05T07:37:47.310 に答える
1

outlineこのプロパティのサポートは IE 8 で追加されたため、この手法は IE 7 では機能しません。新しいバージョンでは機能します。コードを IE 9 でテストすると、IE 9 モードと IE 8 モードの両方で動作します。（「機能する」とは、「望ましいユーザビリティの問題を生み出す」と定義されます。）

IE 7 で目的の効果を得るには、独自の HTML 属性を使用できますhidefocus。

<li><a href="#" style="color: black; " hidefocus>test 2</a></li>

hideFocusまたはJavaScript で対応する DOM プロパティを設定します。

于 2012-10-05T07:55:41.847 に答える
0

ページで JavaScript を使用できる場合は、これを試してください。IE9 と FF15 で動作しています。

    <script type="text/javascript">

        if (document.documentElement.attachEvent)
            document.documentElement.attachEvent('onmousedown', function(){event.srcElement.hideFocus=true});

    </script>
于 2012-10-05T07:57:56.263 に答える