:hover 在 IE8 上效果不佳

Question

嗨，我的 :hover CSS 代码有一个小问题。在 IE8 上，当我将鼠标移到文本上时我的 link 悬停，但外部文本不起作用。我真的不知道我的错误在哪里。需要一些帮助！

html:-

<a href="#" class="ctaBlock" name="">text text text</a>

CSS:-

.ctaBlock {
  border: 1px solid #333;
  font: 400 10px/43px arial,helvetica,sans-serif;
  color: #333;
  letter-spacing: .1em;
  display: inline-block;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
  line-height: 42px;
  width: 34%;
}
#content .ctaBlock:after {
 font-size: 7px;
 font-weight: 400;
 line-height: 1;
 font-family: iconFont;
 font-smoothing: antialiased;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: greyscale;
 font-style: normal;
 font-variant: normal;
 letter-spacing: normal;
 text-decoration: none;
 text-transform: none;
 content: '>';
 display: inline;
 margin-left: 3px;
}
#content .ctaBlock:hover {
 background:rgb(255,255,255);
 background: transparent;
 background:rgba(255,255,255,0.3);
 filter:progid:DXImageTransform.
 Microsoft.gradient(startColorstr=#4cffffff,endColorstr=#4cffffff);
 zoom: 1;
 text-decoration: none;
 cursor: pointer;
}

Answer 1

不透明度属性在 IE8 中不起作用。添加这个 background:rgb(255,255,255);然后在末尾分别加上opacity:0.8。或者如果你使用散列颜色代码会更好。

Answer 2

IE8 在处理元素的透明部分时存在一些问题。我前一段时间遇到了同样的问题，我通过在 CSS:

中添加透明图像（1px x 1px）作为背景来解决它

background-image: url("transparent.png");

或者用一个数据-URL:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wgUEhgsb9YM9wAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAADUlEQVQI12NgYGBgAAAABQABXvMqOgAAAABJRU5ErkJggg==);

我认为一个更简单的解决方案是为您的 link 添加非透明背景色。但这取决于您对透明背景的需求。我还没有测试第二种解决方案，但你可以试试看。

:hover 在 IE8 上效果不佳

:hover doesn't work well on IE8

html

css

internet-explorer-8