Question

我继承了一个我正在进行整理的网站，这种风格适用于我的页脚内的标签（请原谅我，如果我没有提供足够的信息，请告诉我，我会把它放完）。该样式在标题文本周围添加了一种微妙的背景颜色，并使角落稍微圆了一点：

    h4 {
    background: none repeat scroll 0 0 rgba(32, 37, 41, 0.3);
    border-radius: 8px 8px 8px 8px;
    color: #5CB414;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 20px;
    padding: 12px 0 8px 10px;
    position: relative;
    }

这在Chrome和FF中效果很好，但在IE8中它不起作用。在IE8中，它不会使列彼此相邻。 Here is the site.向下滚动到底部以查看问题（应该是3列，但在IE中它只有2，并且没有应用于H4的背景样式。

我知道IE很挑剔，但我不知道该怎么做。任何帮助将不胜感激。谢谢！

Answer 1

至于丢失底部的3列简单地将“.col”width:300px替换为width:292px;它只是勉强过大。

另外圆角与crossbrowser兼容我喜欢从这里获取我的风格：http://css3please.com/

我不知道圆角会在ie8或更低的情况下工作，所以你可以尝试使用jquery而不是css3 http://jquery.malsup.com/corner/

Answer 2

9之前的IE版本不支持RGBA或边框半径，因此这些只是被忽略。您可以在http://css3please.com处尝试跨浏览器语法，但这不会在9之前的IE版本中为您提供圆角。

你的列浮动问题源于你在style.css的第1454行使用了第n个子选择器：

.col：nth-child（3）{margin-right：0; }

同样，IE8及更低版本不支持此功能，因此您必须找到解决方法。您可以在第三列中添加“last”类，并将其放在样式表中：

col.last {margin-right：0！important; }

CSS样式在Chrome / FF中工作但不适用于IE8

2 个答案: