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

我继承了一个我正在完成的网站，并且这种样式适用于我的页脚中的标签（如果我没有给出足够的信息，请原谅我让我知道，我会把它）。风格把一个微妙的背景颜色周围的标题文本和使棱角变圆了一下：在Chrome/FF中工作的CSS样式但不适用于IE8

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很挑剔，但我不知道是什么怎么办呢。任何帮助，将不胜感激。谢谢！

来源

2011-04-14 drpcken

版本使用jQuery，而不是CSS3做它不支持RGBA或边界半径，所以这些都是简单地被忽略。您可以尝试跨浏览器语法http://css3please.com，但这不会让您在9之前的IE版本中找到圆角。

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

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

再次，IE8和更低版本不支持这个，所以你必须找到解决办法。您可以在第三列添加一类“last”，并将其放置在样式表中：

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

来源

2011-04-14 15:27:27 amustill

我相信它在IE8中实际上并不支持。 – DHuntrods 2011-04-14 15:31:56

你是对的，不是。我总是感到困惑，因为我大部分时间都是使用“第一个孩子”，因为这个原因，因为它在IE7 +中得到了支持，并且只需要在IE6中简单地修复它。用防弹修补编辑的答案。 – amustill 2011-04-14 15:36:49

这是否应该是'.col.last'？我知道你可以添加多个类到一个元素，但这让我有点困惑。谢谢。 – drpcken 2011-04-14 16:30:10

只要在底部简单更换“.COL” width:300px到width:292px;这只是勉强过大失去了3列。

还与圆角与交叉浏览器兼容我喜欢从这里得到我的风格：http://css3please.com/

我不知道，圆角将在IE8中工作或更低，所以你可以尝试之前，IE 9的 http://jquery.malsup.com/corner/

来源

2011-04-14 15:23:13

谢谢，这很有帮助，但我不想改变我的列的宽度，所以我使用amustill的建议，在列中添加一个.last类。我希望我能给你两个答案检查！谢谢！ – drpcken 2011-04-14 16:33:12

不客气。至少你有它的工作。 – 2011-04-14 16:59:31

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

回答

相关问题