web-dev-qa-db-ja.com

Chromeユーザーエージェントスタイルシートがサイトのスタイルを上書きする

私のページの1つにリンクのスタイルを設定する次のCSSがあります。

a:link, a:visited, a:active {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

ただし、ロードすると、Chromeに青で表示され、Firefoxで白に表示されます。 Chrome開発ツールは、私のスタイルがユーザーエージェントのスタイルシートを上書きすることを明らかにしています：

enter image description here

なぜ正しく表示されないのですか？スタイルシートの上部に文字セットを設定してみました：

@charset "UTF-8";

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    font: 11px "Lucida Grande", Arial, Sans-serif;
}

a:link, a:visited, a:active {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

input[type=email], input[type=password] {
    display: block;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #ACE;
    font-size: 13px;
    margin: 0 0 5px;
    padding: 5px;
    width: 203px;
}

しかし、それは助けにはなりませんでした。私のスタイルシートは次のように頭でリンクされています：

<link href="/assets/global.css?body=1" media="screen" rel="stylesheet"
type="text/css">

そして、リンクのhtmlコード：

<a href="/users/sign_in">Sign in</a>
<a href="/users/password/new">Forgot your password?</a>
<a href="/users/auth/facebook">Sign in with Facebook</a>

これはChrome（13.0.782）での表示です-正しくありません：

enter image description here

これはFirefoxでの表示です-正しい：

enter image description here

ユーザーエージェントのスタイルシートが私のスタイルを上書きしているようです。どうして？

htmlruby-on-railscssgoogle-chromeweb
22
TK Gospodinov

Vonklyは問題の特定を支援しました。私はすべてのスタイルシートを掘り下げましたが、そのうちの1つにタイプミスが見つかりました-ヘッダーのリンクスタイルを定義するときに親要素が欠落していたため、代わりに

header a:link, header a:visited {
...
}

持っていた

header a:link, a:visited {
...
}

そのため、本文のリンクに対して定義したスタイルをオーバーライドしていました。初めてスタイルシートを確認しているときに見逃していたに違いありません。

みなさん、コメントありがとう！

7
TK Gospodinov

理由はわかりませんが、これを追加します<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 前 <html>そしてそれは解決しました

11
Ahmad Muzakki

<!DOCTYPE html>タグの前に<html>を追加するだけです。

4
barbolo

私は同じ種類の問題を抱えていました、私の場合、私のいくつかのクラスは強制的に表示するように解決されています：なし

30/40分後、ブラウザの拡張機能を調べたところ、これらすべてがAD Blockerが原因で発生していることがわかりました。

上記の解決策がうまくいかない場合は、この種のブラウザ拡張機能がある場合はこれも一度試してください。

2
Vipin Chaudhary

ユーザーエージェントスタイルシートは、CSSがタグのプロパティの定義を怠った場合にのみ有効です。 CSSスタイルにタイプミスがあるかもしれないことを考慮してください。

タグ宣言をcssファイルの先頭に配置して機能する場合、cssにエラーがある可能性があります。

あなたのCSSを実行してみてください CSS Lint

私はこの永続的な問題を抱えていて、私のCSSに間違いを発見しました。

1
tony gil