Это скорее фича, чем бага
Столкнулся с непонятной мне ошибкой или, наоборот, фишкой в браузере FireFox. По каким-то странным причинам этот браузер стал мне рисовать рамки у таблиц, хотя все они обнулены в reset.css (от Эрика Мейера). Стал копаться и вот до чего дошёл.
Суть проблемы поясню графически:
Рис 1. Так выглядит макет во всех браузерах
Рис 2. А так это выглядит в FireFox 3.5
Разметка — самая простая таблица:
<table class="super-photo" border="1" cellspacing="0" cellpadding="10"> <tbody> <tr> <td><img src="" alt="" width="250" height="167" /></td> <td><img src="" alt="" width="250" height="167" /></td> </tr> ... </tbody> </table>
Естественно, я сразу влез в CSS и написал там правило:
.super-photo td { border: none; }
Но это не помогло, тогда решил тупо задать цвет рамки, совпадающий с фоном страницы:
.super-photo td { border: 1px solid #D8E9F1; }
Всё бы ничего, но фон страницы не монотонный, а градиентный, поэтому в некоторых местах рамку всё же становилось видно. Решил сделать её прозрачной:
.super-photo td { border: 1px solid transparent; }
Во всех браузерах, кроме Internet Explorer (он не знает прозрачных рамок) всё встало на места. Какого же было моё удивление, когда я обнаружил, что данная ошибка возникла по вине атрибута border=«1» в HTML — разметке. Если обнулить этот атрибут — всё встанет на свои места:
<table class="super-photo" border="0" cellspacing="0" cellpadding="10"> <tbody> <tr> <td><img src="" alt="" width="250" height="167" /></td> <td><img src="" alt="" width="250" height="167" /></td> </tr> ... </tbody> </table>
Встаёт вопрос к разработчикам FireFox: с какого перепуга атрибуты тега стали важнее, чем стили, прописанные в классе? Жду ваших комментариев.
Сталкивался с этой проблемой совсем не давно!
Только так и не докопался до сути, просто не много переписал код, т.е. выбрал не много другой подход.
Какой подход выбрали вы?
Какой злостный Firefox! Сам себе 1 пишет и сам себе отображает, жуть какой браузер!
Не понял вашей иронии! В CSS убрана рамка, но браузер её показывает.
Атрибуты тега называются встроенными (инлайновыми) и у них самый высокий приоритет, выше css
можно было еще добавить border: none !important; что бы переопределить, не помню точно сработает ли это с инлайновым атрибутом
У атрибутов тега приоритет выше CSS? Да ну. Вот если бы это были инлайн стили, то да — приоритет выше.
PS: Информация давно не актуальна в статье: пост от 2009 года. FireFox давно не тот