0

Google chrome ではdiv、アンカー内に がある場合、境界線がランダムにテキストの色に変わります。要素を検査すると、色が即座に適切な色に戻ります。このエラーを回避する方法はありますか?

これはhtmlです：（毎回発生するわけではありません。自然に間違った色になります）

<a href="/about"><div class="navc">
    <div class="navt"><?php echo $lang['0']; ?></div>
</div>
</a>

これはcssです：

#nav
{
float:left;
width:100%;
height:30px;
background:url('../images/nav.png') repeat-x;
border:1px solid #C2C1C1;
text-shadow:0 1px 0 white
}

#nav a
{
color:black;
text-decoration:none
}

.navc
{
padding:0 10px;
border-left:1px solid #C2C1C1;
border-right:1px solid #EEE;
float:left;
height:100%
}

.navt
{
padding-top:6px
}

次の画像でわかるように、About ナビゲーション ボタンの境界線が間違っています。

ボーダーエラー

4

3 に答える 3

1

このバグを解決するのに 3 時間しかかかりませんでした (このような日には、Webkit は Trident と同じくらい悪いと感じます)... しかし、答えは次のとおりです。

(<a>)訪問された「href」値を持つアンカー内にインライン要素がある場合にのみ発生します。そのような：

<a href="http://www.google.com"><span>Button</span></a>

この問題を解決するために、次の CSS を追加しました。

a {color: blue}

a span,
a:visited span /* Webkit will render a blue border unless this is explicitly specified */
{
    border: 1px solid red;
}
于 2013-03-20T22:26:19.437 に答える
0

私は解決策を見つけました、

spanの代わりにを使用するdivと、問題は発生しないようです。

編集 - スパンになってから一度発生し、更新され、それ以来発生していません。

于 2012-06-26T15:41:12.523 に答える
0

次のようなマークアップでこれに遭遇しました：

<a href="http://www.google.com" class="outer-link">
    <img src="http://google.com/gif.png" />
</a>

私のスタイルは次のようになりました：

img { border: 2px solid gray; }

灰色の境界線が青色のリンク色に変わっていました。これを修正した方法は次のとおりです。

.outer-link { color: gray; }

そのため、img が間違った境界線を取得している場合でも、指定した灰色の境界線の色がデフォルトになります。私はそれが少しハックであることを知っていますが、うまくいきます。

于 2013-06-18T17:32:53.660 に答える