CSS - IE8 错误答案

【问题标题】：CSS - IE8 errorsCSS - IE8 错误
【发布时间】：2013-12-14 01:24:43
【问题描述】：

我有一个 wordpress 网站在 Internet Explorer 8 中遇到兼容性问题。http://www.sunsetbaycharters.net

导航菜单无法在 IE8 和 IE7 中正确加载。

IE8 中的导航错误

另外，我网站中的内容框在 IE8 中不是透明的。我知道这是因为我使用的是 RGBA，我需要知道如何修复它。

请告诉我如何修复 IE8 和 IE7 中的导航菜单和 rgba 透明框。

导航菜单的 CSS 代码：

div#top-menu, div#top-menu.et-fixed {
    background-color: white;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 1000;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.8);
    height: 80px;
    text-align: center;
}

【问题讨论】：

IE8 麻烦。还有什么是新的？ :p （另外，这个网站很漂亮。）
请显示此菜单的css代码......
div#top-menu, div#top-menu.et-fixed { 背景颜色：白色；位置：固定；顶部：0px；左：0px；宽度：100%； z 指数：1000；盒子阴影：0px 0px 10px 2px rgba(0, 0, 0, 0.8);高度：80px；文本对齐：居中； }
在 IE8 中它工作得很好....但在 IE 7 中不能正常工作......
@Rony：我使用的是 IE8 8.0.6001.18702，我在两台电脑上都遇到了问题。

标签： css firefox internet-explorer-8 cross-browser compatibility

【解决方案1】：

对于内容框背景透明度，您必须使用背景图像（因为 IE8 不支持透明度）。只需制作您想要使用的颜色/透明度的 5x5 方形 PNG，并将其设置为背景重复。例如：

.target-element {
    background-image: url('images/your-transparent-tile.png');
    background-repeat: repeat;
}

至于框间距问题，您必须让我们看看您的 CSS。这可能与 IE8 缺乏 display: inline-block 支持有关。

【讨论】：

感谢您的方法！我会试试看。我已经用 css 更新了主帖。