Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 106
Под Linux картинки для Firefox и Chrome имеют аналогичные ошибки, что и под Windows. Так что в данном случае операционная система не вносит искажений, только различия в реализации браузеров.
Хром (кликабельно):
chrome 18.0.1017.2 dev-m
страничка получилась как на скрине с IE
страничка получилась как на скрине с IE
И где стандартный комментарий про IE? :) Судя по всему он единственный, кто работает правильно.
Да IE 9-10 почти норм. Если бы теперь 7-8 исчезли, было бы круто
делайте плавную деградацию, не пытайтесь сделать закругленные уголки, тени, и т.д. И не будете замечать проблем в IE7-8. А IE6 почти IE7, только alpha не поддерживает, заменяет на png8, и не обращайте на неровности на краях :) и у вас почти не будет головной боли.
Плюс через сonditional comments можете в ie6-ie8 отключить часть функционала, или сделать его по другому.
Плюс через сonditional comments можете в ie6-ie8 отключить часть функционала, или сделать его по другому.
Я вам скажу по секрету, если заказчик хочет на своем ie 7 закругленные уголки, и платит за это — приходится делать
Я знаю, в последнем проекте столкнулся с этим :( как я только не называл ту девушку, которая мне показывала скриншот в ie7 и скрин макета… Ей не смог объяснить, что это не правильно :( пришлось делать. Хотя она сама мне показывала статистику браузеров, в котором ie6-ie7 в сумме меньше 4%.
С большинством проще, они сразу понимают, что так не надо делать, и хотят, чтобы все было хорошо в ipad/iphone )
С большинством проще, они сразу понимают, что так не надо делать, и хотят, чтобы все было хорошо в ipad/iphone )
ie6-ie7 в сумме меньше 4%.
Иногда это бывает критично.
Например у нас через проект идут заявки на покупку франшизы. В среднем около 100 заявок в день. Цена одной заявки в среднем 1,5 миллиона рублей.
Доля ie6/ie7 у нас на сайте порядка 2,5%. Но если мы скажем что доля 2,5% очень маленькая и ей можно пренебречь — это будет неверно, потому что если наш сайт не будет нормально работать в ie6/7 то наши партнеры будут каждый день терять в среднем 4 миллиона рублей.
Достаточно солидная мотивация сделать чтобы все работало :)
Поэтому считать в % не всегда верно, как мне кажется.
150 миллионов в день. Это 55 миллиардов в год. Кто эти люди? Мы на одной планете живем?
И что для создания заявки необходимы именно закругленные уголки?
Именно закругленные уголки не необходимы, но и мой комментарий был не об этом, а том что человек говорил мол в статистике 4% это же очень мало, чего она придирается.
А я хотел своим комментарием сказать что мерять такие вещи процентами не очень верно, потому что за мизерным процентом могут скрываться солидные суммы денег.
А я хотел своим комментарием сказать что мерять такие вещи процентами не очень верно, потому что за мизерным процентом могут скрываться солидные суммы денег.
Никто не говорит отказать от работы в IE6-IE8
просто можно делать так, чтобы там было менее красиво, но все также и работало. Отключение части визуальных возможностей — закругленные уголки, стилизованные формы и т.д. не должны не как повлиять на клиентов, тем более они и не узнаю, что там должно было быть что-то круглое, пока не откроют сайт в нормальном браузере.
просто можно делать так, чтобы там было менее красиво, но все также и работало. Отключение части визуальных возможностей — закругленные уголки, стилизованные формы и т.д. не должны не как повлиять на клиентов, тем более они и не узнаю, что там должно было быть что-то круглое, пока не откроют сайт в нормальном браузере.
Человеку который что-то покупает далеко **** на круглые уголки и тени если что! Он хочет купить быстро, дешего и качественно.
Для этого нужно чтобы исчезла XP или MS выпускала для неё браузеры.
Я не понял. Вы сначала говорили о поддержке древних стандартов, а использовали box-sizing (даже заметили, что кое-кто их без префиксов использует). Как так?
www.w3.org/TR/css3-ui/#box-sizing
W3C Working Draft 17 January 2012
W3C Working Draft 17 January 2012
Content-box это стандартная блочная модель для w3c, для него свойство box-sizing вообще не используется.
Ну, Working Draft — это даже не Candidate Recommendation. Формально именно на стадии CR браузерам рекомендуется делать реализацию, причем желательно с вендор-префиксом. Префикс убирается на стадии Proposed Recommendation. Что-то браузеры тут вперед паровоза спешат.
Древние я имел ввиду сами таблицы и свойства width, height, border. Box-sizing появился уже при попытке заставить браузеры одинаково работать. Да и -webkit-box-sizing чуть ли не с первой версии Chrome реализован.
В Mac OS поведение аналогичное. FF 9.0.1 как на Вашем скриншоте, Safari повторяет Chrome (и не удивительно, проблема в WebKit'е).
box-sizing — черновик (http://www.w3.org/TR/css3-ui/). Поэтому нет ничего странного в том, что при его использовании вылезают косяки в некоторых браузерах. А IE, да, молодец.
FF12 (Nightly) — аналогично FF9 из поста.
Пруф.
Пруф.
А как гадко начинают вести себя таблицы с colspan, когда в больших ячейках сверху текст занимает места больше чем размер маленькой ячейки снизу.
я понимаю, что брюзжу, но поменяйте cellspacing=0 на стили border-collapse: collapse; а то невалидно :)
Если вам нужно убрать отступы между бордерами в таблице, то да, эквивалентно, другой причины, почему автор использует не рекомендуемый тег не вижу. И не ширины а отступов и отрисовки бордеров.
htmlbook.ru/html/table/cellspacing
htmlbook.ru/css/border-collapse
htmlbook.ru/html/table/cellspacing
htmlbook.ru/css/border-collapse
Opera 12.00 alpha (1213) — ipic.su/img/img3/fs/kiss_67kb.1327486737.png
Автору: На тестовой странице нижний правый пример подписан не верно, хотя на скриншотах всё в порядке… Вероятно должно быть «Box-Sizing: border-box»
> Браузеры запутались в блочной модели для таблиц
Немудрено. Еще в прошлом веке W3C заварил дурацкую кашу с дурацкой боксовой моделью. Потом зачем-то ввел дополнительно к своей дурацкой микрософтовскую, и вот результат через 13 лет — «Браузеры запутались в блочной модели»
Немудрено. Еще в прошлом веке W3C заварил дурацкую кашу с дурацкой боксовой моделью. Потом зачем-то ввел дополнительно к своей дурацкой микрософтовскую, и вот результат через 13 лет — «Браузеры запутались в блочной модели»
Та потому то W3C — мудаки, далёкие от жизни.
> я по сей день так и не понимаю…
в общепринятой модели были нестыковки. Например, непонятно как быть с картинкой. Если ей давать border то либо контент съедается, либо картинка масштабируется. В W3C решили эту проблему, зато и разработчики получили геморрой минимум на два десятилетия.
в общепринятой модели были нестыковки. Например, непонятно как быть с картинкой. Если ей давать border то либо контент съедается, либо картинка масштабируется. В W3C решили эту проблему, зато и разработчики получили геморрой минимум на два десятилетия.
Надеюсь, табличные данные вы не собираетесь дивами переверстывать?
Я собираюсь. Во всяком случае попробовать. Дивы рисуются намного быстрее чем таблицы. В ИЕ нельзя заменять иннерХТМЛ в ТР, что для меня критично, ибо иаблица рассчитывается на хотя бы 20к строк и потому рисует только видимый кусок + запас.
Я не собираюсь, для грида таблицы используются. И учитывая, что по комментариям выше уже в следующей версии Chrome будет работать как IE9, то спокойно можно использовать таблицы с border-box. Как раз в моем случае пока закончу грид, и хром обновится.
Еще браузеры ведут себя странно и в другой ситуации с таблицами 100% высоты в ячейке(display:table-cell) таблицы(display:table)
Если сделать border 1px, все приходит в более-менее норму. Я подозреваю, проблема вызвана тем, что при расчете размеров border оказыается в разных браузерах принадлежащим разным кускам таблицы: где-то он принадлежит td, а где-то — tr или колонке, соответственно, где-то он влияет на. Вот отсюда, видимо и погрешности. Спецификация CSS ведь многие моменты оставляет на откуп браузерам, верно? Ну вот и не жалуйтесь.
Еще интересный момент, который меня всегда раздражал — во всех браузерах input:text имеет box-sizing: content-box, а button — box-sizing:padding-box + иногда еще 1-2 пиксельные неубиваемые отступы в некоторых браузерах. Как в такой ситуации сделать input и кнопку одинаковой высоты, если мы не хотим жестко задавать пиксельные размеры? Непонятно.
Еще интересный момент, который меня всегда раздражал — во всех браузерах input:text имеет box-sizing: content-box, а button — box-sizing:padding-box + иногда еще 1-2 пиксельные неубиваемые отступы в некоторых браузерах. Как в такой ситуации сделать input и кнопку одинаковой высоты, если мы не хотим жестко задавать пиксельные размеры? Непонятно.
Зачем тестовую страницу со статическим контентом делать в php? Чтобы наплыв пользователь с хабра положил сервер?
Отличное исследование! И не менее полезные комментарии, в основной своей массе.
Топик-стартеру — спасибо.
Топик-стартеру — спасибо.
Opera 12 alpha: от 11.52 не отличается.
Похоже, производители браузеров в гонке за количеством внедренных черновиков – забыли, что стандарты нужно не только поддерживать, но и поддерживать правильно и одинаково.
Нужен очередной Acid Test для поднятия мотивации у разработчиков браузеров. Собрать 10 самых старых и грубых недочётов от каждого браузера (некоторые будут общими для нескольких браузеров) и сделать красивый и интересный тест. Если кто возглавит мероприятие, то я присоединюсь.
www.hixie.ch/tests/evil/acid/004/
Как видим, Хикси не собирается ориентироваться на старые ошибки браузеров.
It will likely focus on the following specifications and areas:
* dev.w3.org/csswg/css3-multicol/
* dev.w3.org/csswg/css3-background/
It may also include subpixel positioning; will likely be partially or
entirely in rtl mode and may contain non-ASCII Unicode characters with
special formatting requirements, e.g. U+200B; and may contain empty
inline boxes that are styled.
Как видим, Хикси не собирается ориентироваться на старые ошибки браузеров.
В принципе проверку этого бага довольно легко можно автоматизировать, так что можно собирать различные глюки, и потом сделать тестилку, и вполне возможно, что публикация его на хабре, доберется и до разработчиков.
display: inline-block; по идеи должно зафиксить разницу для всех браузеров и без всяких костылей.
Вам не кажется, что надо начинать с себя, прежде чем писать изобличительные статьи в стиле «шок! интриги! расследования!»?
1. border-collapse должен быть separate, иначе ячейки не ведут себя как отдельные блоки
2. у вас неверно прописаны стили, и где ширина таблицы — проставлена ширина и таблицы и td
3. при работе с размерами таблицы всегда указывают table-layout: fixed, без этого все размеры являются, как бы это сказать, пожеланиями, которые браузер может не учитывать.
4. высота должна выставляться элементу, которому задана ширина: если задаем ширину table, то и высоту там, td в обратном случае
Если все нормально сделать, все работает правильно(внимание, большая картинка с ie, ff, chrome): imgur.com/1EIwV
Страница тут: jsfiddle.net/kXM5K/
2 замечания:
в одном случае пришлось выставить td display: inline-block
в ие див и таблица смещены по вертикали относительно друг-друга (они display: inline-block), но размеры верны
1. border-collapse должен быть separate, иначе ячейки не ведут себя как отдельные блоки
2. у вас неверно прописаны стили, и где ширина таблицы — проставлена ширина и таблицы и td
3. при работе с размерами таблицы всегда указывают table-layout: fixed, без этого все размеры являются, как бы это сказать, пожеланиями, которые браузер может не учитывать.
4. высота должна выставляться элементу, которому задана ширина: если задаем ширину table, то и высоту там, td в обратном случае
Если все нормально сделать, все работает правильно(внимание, большая картинка с ie, ff, chrome): imgur.com/1EIwV
Страница тут: jsfiddle.net/kXM5K/
2 замечания:
в одном случае пришлось выставить td display: inline-block
в ие див и таблица смещены по вертикали относительно друг-друга (они display: inline-block), но размеры верны
Согласен, inline-block — не совсем верное решение. В хроме есть баг, где box-sizing применяется только к ширине td, т.е. выходит ширина 100px, высота 150px. Баг уже исправлен в Canary.
Еще удалось найти: «However, in HTML and XHTML1, the width of the element is the distance from the left border edge to the right border edge.», т.е. ширина (и высота) таблиц считается по умолчанию вместе с бордерами. (это еще со времен HTML3: «The default table width is the space between the current left and right margins.») И далее: «In CSS3 this peculiar requirement will be defined… бла бла». Т.е. точное поведение таблиц с box-sizing еще не определено в css3. www.w3.org/TR/CSS2/tables.html#width-layout
Еще удалось найти: «However, in HTML and XHTML1, the width of the element is the distance from the left border edge to the right border edge.», т.е. ширина (и высота) таблиц считается по умолчанию вместе с бордерами. (это еще со времен HTML3: «The default table width is the space between the current left and right margins.») И далее: «In CSS3 this peculiar requirement will be defined… бла бла». Т.е. точное поведение таблиц с box-sizing еще не определено в css3. www.w3.org/TR/CSS2/tables.html#width-layout
Нда, обсуждение немаленькое получилось :)
«Таблицы … всячески подстраиваются под контент, и применять их следует не для жёсткой разметки страницы, а для плавающих табличных данных» — именно. Даже при разном поведении в тестах, если использовать их не для разметки, а по прямому назначению, как задумывалось, проблем, как правило, никогда не возникает.
«Таблицы … всячески подстраиваются под контент, и применять их следует не для жёсткой разметки страницы, а для плавающих табличных данных» — именно. Даже при разном поведении в тестах, если использовать их не для разметки, а по прямому назначению, как задумывалось, проблем, как правило, никогда не возникает.
Я их для грида использовал, или грид не таблицами нужно делать?
Классический пример такой сетки, если я правильно понял слово «грид», вот: 960.gs/
Ну или это: lessframework.com/
Конечно же, все без таблиц.
Ну или это: lessframework.com/
Конечно же, все без таблиц.
Это уже из разряда костылей по-моему. Зачем тогда все эти стандарты раз так нужно извращаться для создания простой таблички.
1. border-collapse, как и border-spacing тут вообще ни к чему, так как это касается блочной модели, браузеры не могут определиться входит граница в размеры ячейки или нет.
2. В чем ошибка? Это как бы наоборот позволило увидеть адекватное отображение в firefox.
3. table-layout пробовал — без разницы, потому в конечном итоге убрал.
4. Т.е. вы предлагаете в гриде, сначала посчитать высоту таблицы?
И кстати в статья я не ставил задачу сделать, чтобы таблицы были одинаковыми с дивами (дивы там для наглядности, в чем отличия блочной модели). Цель была одна, чтобы таблица у которой заданы размеры ячеек и их границы, выводились одинаково во всех браузерах. Так как в гриде мы не знаем размеров таблицы, туда загружаются разные данные, и самостоятельно считать размеры таблицы как-то тоже попахивает костылями.
1. border-collapse, как и border-spacing тут вообще ни к чему, так как это касается блочной модели, браузеры не могут определиться входит граница в размеры ячейки или нет.
2. В чем ошибка? Это как бы наоборот позволило увидеть адекватное отображение в firefox.
3. table-layout пробовал — без разницы, потому в конечном итоге убрал.
4. Т.е. вы предлагаете в гриде, сначала посчитать высоту таблицы?
И кстати в статья я не ставил задачу сделать, чтобы таблицы были одинаковыми с дивами (дивы там для наглядности, в чем отличия блочной модели). Цель была одна, чтобы таблица у которой заданы размеры ячеек и их границы, выводились одинаково во всех браузерах. Так как в гриде мы не знаем размеров таблицы, туда загружаются разные данные, и самостоятельно считать размеры таблицы как-то тоже попахивает костылями.
Чел походу не особо вчитывался о чем статья. Ключевая тема в том, что один и тот же код браузеры выводят по-разному.
Ему бросился в глаза баг firefox (и типа от того что это баг старый должно стать легче), а его не смутило, что хром показывает тоже неправильно, причем посвоему неправильно?
А что касается атрибута cellspacing, это называется найти к чему приколупаться, наверное если бы я там тег B использовал в примере, то наверняка автор кричал бы, что нужно STRONG использовать.
Ему бросился в глаза баг firefox (и типа от того что это баг старый должно стать легче), а его не смутило, что хром показывает тоже неправильно, причем посвоему неправильно?
А что касается атрибута cellspacing, это называется найти к чему приколупаться, наверное если бы я там тег B использовал в примере, то наверняка автор кричал бы, что нужно STRONG использовать.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Браузеры запутались в блочной модели для таблиц