Непрозрачность в IE8 работает на <p>, но не на <a> - PullRequest
4 голосов
/ 10 августа 2010

У меня проблема с IE8, где я не могу сделать прозрачными <a> элементы. Я нашел эти связанные вопросы, но мне не повезло с ответами, предоставленными там:

Я пытался " дать макет ", используя zoom: 1;, но это не помогло. Вот мой тест CSS, взятый из примера на этой странице :

.test {
  background-color: #6374AB;
  width: 100%;
  color: #ffffff;
  zoom: 1;
}
.opaque1 {
  opacity: .5;
}
.opaque2 {
  filter: alpha(opacity=50);
}
.opaque3 {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.opaque4 {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}

И тест HTML:

<p class="test">Test paragraph without opacity.</p>
<p class="test opaque1">Test paragraph with <code>opacity</code></p>
<p class="test opaque2">Test paragraph with <code>filter</code></p>
<p class="test opaque3">Test paragraph with <code>-ms-filter</code></p>
<p class="test opaque4">Test paragraph with compatibility note</p>

<p>
  <a class="test" href="#">Test anchor without opacity.</a><br/>
  <a class="test opaque1" href="#">Test anchor with <code>opacity</code></a><br/>
  <a class="test opaque2" href="#">Test anchor with <code>filter</code></a><br/>
  <a class="test opaque3" href="#">Test anchor with <code>-ms-filter</code></a><br/>
  <a class="test opaque4" href="#">Test anchor with compatibility note</a><br/>
</p>

В IE8 абзацы opaque2, opaque3 и opaque4 прозрачны, но ни один из якорей не является. В IE6 якорь opaque2 и opaque4, параграф и имеют транспарань.

1 Ответ

6 голосов
/ 11 августа 2010

Попробуйте указать якорь display:block, но тогда вам придется исправить его свойства CSS, такие как ширина, высота .... и т. Д. Но как только вы дадите якору свойство display:block, прозрачность будет работать нормально.

Согласно комментариям, вам может повезти с display: inline-block;zoom:1 - встроенный блок работает на IE8, масштаб будет нацелен на IE 6/7.

...