web-dev-qa-db-ja.com

IE7でリンクの周りの点線の枠を削除する方法

クリックするとボタンとリンクの周りに境界線が表示されます。

enter image description here

enter image description here

誰かがそれを削除する解決策を手伝ってくれるでしょうか?.

22
Mo.

それは醜いですが、ほとんどのIE修正はそうです。

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

あなたはそれをそのようにプリセットすることができます:

:focus{
    outline:0; /*removes the dotted border*/
}

ただし、(アクセシビリティの理由から)CSSファイルの「後で」スタイルをより見やすいものに設定することを忘れないでください。例えば ​​:

a:focus, a:active{
    color:#ff5500; /*different color than regular*/
}
input[type=submit]:focus, input[type=submit]:active{
    background-color:#444; /*different color than regular*/
}
49
darma

これをお試しください

a:hover, a:active, a:focus {
  outline: 0;
 }
14
Mahadeva Prasad

まず、タグの1つがIE7-bugであることがわかりますが、これは実際には機能のようなものです。この点線のoutlineを使用する目的は、ユーザーがマウスホイールまたはtabキーを使用してさまざまなコントロール間を移動できるようにすることです。

いずれの場合でも、要素が「フォーカス」されているときに要素のスタイルを定義するには、CSS :focusセレクターを使用します。このアウトラインのスタイルを設定するプロパティは、簡単に言うとoutlineです。 outline: 0は、フォーカスのアウトラインが表示されないようにします。

注:一部のユーザーはフォーカスを示すために何かを見ることに慣れているため、ボタンにのみルールを適用し、前述のメソッドを使用してナビゲートしやすくする場合があります。上記。

それが何らかの形で役に立ったことを願っています。

6
Chris

CSS outlineはIE7ではサポートされていません。その「ブラウザ」には、次のCSS式が必要です。

a {
    _noFocusLine: expression(this.hideFocus=true); 
}

新しいバージョンでも動作します。

5
Vojta Jemelka

a:link {アウトラインスタイル:なし。 } `

3
maindola

これも機能します

 a 
 {
 outline-style:none; 
} 
3
PravinS

これはトリックを行います

a {
   outline:0;
}
3
pwavg

このルールを入力に適用します

input { outline : none ; }
2
Andrew

outline property を設定してみてください:

a {
   outline: 0;
}
2
William

試す

a {
     outline: none;
}

常にcss resetを使用するようにしてください。これは、このような問題を解決するのに役立ちます。私は eric mayer css reset tool を使用します。

2
NewUser

これは、外側の行を削除して、CSSを目的のクラス名で配置するためのすべてのコードです。 (IEのclassName。)タグの例

_a{
    _noFocusLine:expression(this.hideFocus=true);
    outline-style:none;
    outline:0;
_

}

HTMLページのすべてのタグの例!

_*{
    _noFocusLine:expression(this.hideFocus=true);
    outline-style:none;
    outline:0;
_

}

HTMLページにクラスmyClassNameを含むタグの例!

_.myClassName{
    _noFocusLine:expression(this.hideFocus=true);
    outline-style:none;
    outline:0;
_

}

HTMLページにID myidNameを持つタグの例!

_#myidName{
    _noFocusLine:expression(this.hideFocus=true);
    outline-style:none;
    outline:0;
_

}

これが主要なブラウザで機能することを願っています。そうでなくても、古いブラウザなので、どれだけ多くの人がこの古いブラウザを使用している可能性がありますか。

注:_outline:none 0;_は新しいブラウザーでも機能しますが、すべてでは機能しません。しかし、_outline:0;_は普遍的であり、それらのブラウザーでは「none」が理解されず、デフォルト値が取得されますが、0はすべてのブラウザーで次のアウトラインを使用していることを理解しています。そして、IE7にはこれが必要です_noFocusLine:expression(this.hideFocus=true);

または、残りはJavaScriptを使用してください。

_window.document.getElementById("myidName").blur();
window.document.getElementById("myidName").hideFocus=true;
window.document.getElementById("myidName").style.outline=0;
_

または

_Obj=window.document.getElementById("myidName");
Obj.blur();
Obj.hideFocus=true;
Obj.style.outline=0;
_

または要素が存在するかどうかを確認してください!

_if (window.document.getElementById("myidName")){
    Obj=window.document.getElementById("myidName");
    Obj.blur();
    Obj.hideFocus=true;
    Obj.style.outline=0;
}
_

JavaScriptはIE6とIE7のトリックを行うことができ、他のCSSはできません!

0