1

Dan Cederholm によるWeb デザイナー向けの CSS3 に取り組んでいます。

私は企業環境にいて、ブラウザを少なくとも IE7 に戻すことを検討する必要があります (IE6 ではないにしても! - eek!)。

私は、Navigating the Moon の例 (36 ページから) に取り組んでいます。

著者は、CSS でフォ​​ールバック値を使用して適切に劣化させることについて話しています。

ここまでは順調ですね。私は参加していて、ただ試してみたいだけです。

問題は、IE 9 で例を調べているときに、奇妙な結果が得られることです。

<body>私のページのタグの内容は次のとおりです。

<ul id='nav'>
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

ご覧のとおり、これは本当に基本的なものです。

使用しようとしているCSSは次のとおりです。

body {
  background: #000;
}
ul#nav {
  float: right;
  padding: 42px 0 0 30px;
}
ul#nav li {
  float: left;
  margin: 0 0 0 5px;
}
ul#nav li a {
  font-weight: bold;
  padding: 5px 15px;
  text-decoration: none;
  color: #cccccc;
  color: rgba(255, 255, 255, 0.7);
}

Safari でページを表示すると、すべて問題なく、CSS が正しく表示されます (期待どおり)。このページを IE 9 で表示すると、リンクは通常の「HyperLink」青です (両方のcolor指示を無視しているように)。CSS から「rgba」行を削除すると、リンクが に表示され#ccccccます。「rgba」行を に置き換えるとcolor: #000000、リンクが消えます (本文も であるため、予想どおり#000000)。

著者が書いたことに基づいて、2行目を配置すると「rgba」標準をサポートするブラウザでは機能し、そうでないブラウザでは無視されるだけだと思いました.

私は何かを逃しましたか？

4

1 に答える 1

3

投稿されたコードは、説明されている現象を引き起こしているようですが、Quirksモードでのみ発生します。ページをクァークズモードで動作させる必要がある場合は、基本的なスタイルシートの後に表示されるフォールバックコードのコピーで「条件付きIEコメント」を使用するなど、不器用な回避策を検討する必要があります。これにより、関連する設定が上書きされます。 （IEでは9未満）。例;

<style>
/* the basic style sheet here */
</style>
<!--[if IE lt 9]>
ul#nav li a {
  color: #cccccc;
}
<![endif]-->

編集：クァークズモードでは、IEは通常、認識されない値を含む宣言によって、以前に設定された値でさえもドロップされるように動作するようです。たとえば、赤ではなくデフォルトの色のh1 { color: red; color: nonsense }ままにします。h1ただし、これはCSSルール内でのみ適用されます。宣言を別々のルールに配置すると、問題は解消されます。

したがって、ここでは、たとえば、のルールをul#nav li a2つの部分に分割することができます。

ul#nav li a {
  font-weight: bold;
  padding: 5px 15px;
  text-decoration: none;
  color: #cccccc;
}
ul#nav li a {
  color: rgba(255, 255, 255, 0.7);
}
于 2012-09-03T05:31:53.270 に答える