非常奇怪的 IE7/8 边框/不透明度兼容性问题
Posted
技术标签:
【中文标题】非常奇怪的 IE7/8 边框/不透明度兼容性问题【英文标题】：Extremely weird IE7/8 border/opacity compatibility issue 【发布时间】：2011-08-25 02:37:52 【问题描述】：奇怪的问题是在 IE/8/9 中应用 Opacity 时边框消失了，但在 7 中没有！ 我基本上在屏幕顶部有一个带有标签的菜单。 即：
<table>
<tr>
<td class="tab">button 1...<*/td>
<td class="tab">button 2....<*/td>
.
.
.
</tr>
</table>
<style>
td
opacity: 0.45;
filter:alpha(opacity=45);
.
.
.
td.tab:hover
opacity: 1;
filter:alpha(opacity=100);
对不起，我无法让代码块格式正常工作。 基本上，这只是应该在鼠标悬停在按钮上时使按钮退色，但边框会消失！此问题仅在 IE8/9 上出现，但在 IE7、FF、Chrome、Safari 上一切正常。 我在互联网上搜索了一些奇怪的 IE8+ 边框/不透明度问题，但似乎没有。 有没有人遇到过类似的情况？
【问题讨论】：
我刚遇到同样的问题，我一无所知。 您是否为表格单元格设置了背景色，因为它似乎仅在设置了背景色时才会发生。 根据这个问题***.com/questions/3465346/… IE8 中的表格边框似乎有问题，即使使用其他过滤器 鼠标悬停时边框消失？ 【参考方案1】：filter 样式仅适用于 IE7 及更低版本。
IE8 要求您改用-ms-filter（即带有供应商前缀）。此外，IE8 中的语法更复杂。它看起来像这样：
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
IE9 完全放弃了对filter 的支持，并将其替换为标准 CSS3 opacity，其工作方式与所有其他浏览器相同。
Quirksmode.org 有完整的详细信息：http://www.quirksmode.org/css/opacity.html
【讨论】：
我不认为这是使用 IE8 方式编写过滤器的问题。在最坏的情况下，错误的写入过滤器不会应用不透明度。这里的问题是表格单元格边框消失了。 过滤器：alpha(opacity= 100); // 它从 0 到 100 变化【参考方案2】：这是我迄今为止发现的，我认为删除表格单元格中的background-color 对你来说不是一个解决方案。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
table border-top:1px solid #cccccc; border-left:1px solid #cccccc;
table td border-bottom:1px solid #cccccc; border-right:1px solid #cccccc; padding:3px;
table tr.opaque td
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter:alpha(opacity=100); opacity:1;
/* By adding background-color below, the table borders cells disappears
in IE8. It's just the nth Microsoft's trigger tree!
IE7 does not have this issue. */
table tr.opaque td background-color:#ffffff;
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><p>column 1</p></td><td><p>column 2</p></td><td><p>column 3</p></td></tr>
<tr class="opaque"><td><p>column 1</p></td><td><p>column 2</p></td><td><p>column 3</p></td></tr>
<tr><td><p>column 1</p></td><td><p>column 2</p></td><td><p>column 3</p></td></tr>
</table>
</body>
</html>
这是在 IE8 上应用背景色时的漂亮结果：
【讨论】：
我最终不得不求助于将背景颜色从 td 移动到 td 内的 div（div 必须比 td 稍大以使其看起来无缝），同时保持不透明度和在 td 上边框并在 td 上具有背景：无； @Metatron：有趣的新 IE8 hack。我会尝试你的解决方案并让你知道。感谢您分享这个想法。以上是关于非常奇怪的 IE7/8 边框/不透明度兼容性问题的主要内容，如果未能解决你的问题，请参考以下文章