Ячейки таблицы теряются Граница при использовании фильтра градиента CSS в IE8
Я обнаружил, что граница CSS на ячейке таблицы теряется при одновременном применении градиентного фильтра CSS. Кажется, что эффект градиента перекрывает границу.
Это ошибка браузера или я что-то здесь упускаю?
Стиль определяется так:
.c7 {
color: #000000;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#c0c0c0',EndColorStr='#f0f0f0');
border: #000000 1px solid;
width: 100px;
height: 30px;
}
[Обновить] Вы можете применить фильтр непрозрачности и уменьшить его со 100 до 1, и вы можете видеть, как постепенно появляется граница. Это подтверждает мое предположение, что эффект градиента проявляется за границей.
1 ответ
Я нашел исправление, но оно может вам не понравиться ...
Если вы выполняете рендеринг в IE в режиме причуд , граница отображается нормально, только скрыто, если вы используете режим совместимости. Сравните эти две страницы в IE8:
-
(источник: boogdesign.com )
-
(источник: boogdesign.com )
Также работает нажатие кнопки просмотра совместимости, но мои попытки получить те же результаты с метатегами режима совместимости не увенчались успехом . Я пробовал использовать box-sizing , но безуспешно. Я считаю, что единственный способ заставить его работать так, как вы хотите, - это заставить IE перейти в режим причуд, но это может создать так много других проблем для макета, что вам может быть лучше просто добавить элемент оболочки для прикрепления вашего градиентного фона.