Верх страницы
Обложка к записи Это скорее фича, чем бага
Время для прочтения: 0 мин. 3 сек.

Это скорее фича, чем бага

Столкнулся с непонятной мне ошибкой или, наоборот, фишкой в браузере FireFox. По каким-то странным причинам этот браузер стал мне рисовать рамки у таблиц, хотя все они обнулены в reset.css (от Эрика Мейера). Стал копаться и вот до чего дошёл.

Суть проблемы поясню графически:

all

Рис 1. Так выглядит макет во всех браузерах

firefox

Рис 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: с какого перепуга атрибуты тега стали важнее, чем стили, прописанные в классе? Жду ваших комментариев.

Ссылки

Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

6 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Главный Лаборант
14 лет назад

Сталкивался с этой проблемой совсем не давно!
Только так и не докопался до сути, просто не много переписал код, т.е. выбрал не много другой подход.

Кутузов
Кутузов
11 лет назад

Какой злостный Firefox! Сам себе 1 пишет и сам себе отображает, жуть какой браузер!

Evgeniy
Evgeniy
8 лет назад

Атрибуты тега называются встроенными (инлайновыми) и у них самый высокий приоритет, выше css

можно было еще добавить border: none !important; что бы переопределить, не помню точно сработает ли это с инлайновым атрибутом

mihdan
8 лет назад
Ответить на  Evgeniy

У атрибутов тега приоритет выше CSS? Да ну. Вот если бы это были инлайн стили, то да — приоритет выше.

PS: Информация давно не актуальна в статье: пост от 2009 года. FireFox давно не тот

Предыдущая запись
Следующая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы