Стиль CSS работает в Chrome / FF, но не применяется в IE8

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 он не плавает столбцы рядом друг с другом. Вот сайт. Прокрутите вниз, чтобы увидеть проблемы (должно быть 3 столбца, но в IE это только 2, и к H4 не применяется стиль фона.

IЯ знаю, что IE привередлив, но я не знаю, что с этим делать. Любая помощь будет принята с благодарностью. Спасибо!

Answer 1

, если потерять 3 столбца внизу, просто замените ".col" width:300px на width:292px; Это просто слишком много.

Также с закругленными углами, совместимыми с перекрестными переходами, мне нравитсяполучите мои стили отсюда: http://css3please.com/

Я не знаю, что закругленные углы будут работать в ie8 или меньше, поэтому вы можете попробовать сделать это с jquery вместо css3 http://jquery.malsup.com/corner/

Answer 2

Версии IE до 9 не поддерживают RGBA или радиус границы, поэтому они просто игнорируются.Вы можете попробовать кросс-браузерный синтаксис на http://css3please.com,, но это не даст вам закругленные углы в версиях IE до 9.

Ваша проблема с плавающей точкой в ​​колонке проистекает из использования nth-дочерний селектор в строке 1454 вашего style.css:

.col: nth-child (3) {margin-right: 0;}

Опять же, IE8 и ниже не поддерживают это, поэтому вам придется найти обходной путь.Вы можете добавить класс «last» в третий столбец и поместить его в свою таблицу стилей:

col.last {margin-right: 0! Важный;}