[CSS] background в TD и TR для IE и FF
<style>
tr{background: red}
td.s{background: red url('dir.gif')}
</style>
<table>
<tr>
<td>Здесь все нормально</td>
<td class="s">А здесь фигня какая-то</td>
</tr>
</table>
работает везде.
Лично проверил в следующих:
ie 5.0 6.0 7.0
opera 6.0 7.0 8.0 8.5 9.0
firefox 1.0 1.5 2.0
netscape 6.0 7.0 8.1
+safari
tr{background: red}
td.s{background: red url('dir.gif')}
</style>
<table>
<tr>
<td>Здесь все нормально</td>
<td class="s">А здесь фигня какая-то</td>
</tr>
</table>
работает везде.Лично проверил в следующих:
ie 5.0 6.0 7.0
opera 6.0 7.0 8.0 8.5 9.0
firefox 1.0 1.5 2.0
netscape 6.0 7.0 8.1
+safari
Поведение ие, и кстати не только ие, в данном случае на мой взгляд некорректно. Мы же конкретно аттрибут цвета в стиле background не задаём, логичнее было бы отображать ранее заданный аттрибут, а не "затирать" его.
Так же как и в случае с классами. Если мы какому-то ранее определённому классу добавляем стиль, то старые стили разумеется тоже работают. То есть:
.class1{padding:20px}
.class2{margin:20px}
Эта конструкция = .class{padding:20px; margin:20px}, а не .class{margin:20px;}.
Соответственно к этому привыкаешь и ждёшь такого же поведения на уровне аттрибутов. Но ожидания не оправдываются. Ну, тем не менее ситуация не критична, просто дублируем цвет и всё работает. В ие существуют куда более серьёзней проблемы, которые приходится лечить крайне извращёнными методами. А тут ещё всё хорошо
Так же как и в случае с классами. Если мы какому-то ранее определённому классу добавляем стиль, то старые стили разумеется тоже работают. То есть:
.class1{padding:20px}
.class2{margin:20px}
Эта конструкция = .class{padding:20px; margin:20px}, а не .class{margin:20px;}.
Соответственно к этому привыкаешь и ждёшь такого же поведения на уровне аттрибутов. Но ожидания не оправдываются. Ну, тем не менее ситуация не критична, просто дублируем цвет и всё работает. В ие существуют куда более серьёзней проблемы, которые приходится лечить крайне извращёнными методами. А тут ещё всё хорошо
Проще, правильнее и надёжнее так:
td.s{background-image: url('dir.gif')}Вообще-то
Правда, в данном случае это всё равно баг IE, т.к. у ячейки должен быть прозрачный фон, через который должен просвечивать фон TR. Причём этот баг проявляется только в таблицах, если делать что-то подобное с другими тегами, то всё ОК.
The 'background' property is a shorthand property for setting the individual background properties (i.e., 'background-color', 'background-image', 'background-repeat', 'background-attachment' and 'background-position') at the same place in the style sheet.т.е. твое указание
Given a valid declaration, the 'background' property first sets all the individual background properties to their initial values, then assigns explicit values given in the declaration.
CSS 2.1
background: url('dir.gif') эквивалентно background: transparent url('dir.gif') repeat scroll 0% 0%Правда, в данном случае это всё равно баг IE, т.к. у ячейки должен быть прозрачный фон, через который должен просвечивать фон TR. Причём этот баг проявляется только в таблицах, если делать что-то подобное с другими тегами, то всё ОК.
<style>
tr {background: red}
.s {background: url(http://xpoint.ru/styles/Ascetic/icons/drouks_off.gif)}
</style>
<table>
<tr>
<td>Здесь все нормально</td>
<td><div class="s">И здесь тоже</div></td>
</tr>
</table>
несогласен.
Надёжность на равном уровне. ОТчасти правильнее-да. Но раз уж говорить про правильность, то само по себе поведение ие в этом случае уже неправильное. А вот для управления этой картинкой придётся добавлять ещё мусор, типа background-repeat, background-position. Не спортивно.
Это лишь моё мнение.
Надёжность на равном уровне. ОТчасти правильнее-да. Но раз уж говорить про правильность, то само по себе поведение ие в этом случае уже неправильное. А вот для управления этой картинкой придётся добавлять ещё мусор, типа background-repeat, background-position. Не спортивно.
Это лишь моё мнение.
Вообще-тоНу так и что? Те же яйца. Да, баг, да эквивалентно, что ты пытаешься оспорить-то?
ОК.
На самом деле всё зависит от цели и других атрибутов навешенных на эти элементы.
На самом деле всё зависит от цели и других атрибутов навешенных на эти элементы.
всё зависит от целиВ точку
Не надо путать короткую запись свойства (shorthand property) и различные свойства.
margin и padding никак не зависят друг от друга, а background неявно изменяет все background-... свойства.
Записи
Записи
Не надо путать свойства заданные разным элементам (в данном случае фон задан разным элементам) и свойства заданные одному элементу.
ЗЫ. Правда, TR и таблицы вообще очень специфические элементы со своим исторически сложившимся поведением, да и стандарт CSS про них нетривиален для понимания и применения.
margin и padding никак не зависят друг от друга, а background неявно изменяет все background-... свойства.
Записи
margin 10px;и
padding: 20px;
padding: 20px;эквивалентны.
margin: 10px;
Записи
background-image: url(123.gif);и
background: red;
background: red;— нет.
background-image: (123.gif);
Не надо путать свойства заданные разным элементам (в данном случае фон задан разным элементам) и свойства заданные одному элементу.
ЗЫ. Правда, TR и таблицы вообще очень специфические элементы со своим исторически сложившимся поведением, да и стандарт CSS про них нетривиален для понимания и применения.
что ты пытаешься оспорить-то?Вот это:
Мы же конкретно аттрибут цвета в стиле background не задаёмИменно, что задаём. В объявлении
background: url(dir.gif)неявно присутствует цвет transparent и об этом полезно знать и помнить.
Ну разумеется не надо это путать. И я несколько раз подумал, стоит ли приводить такой мягко говоря не аналогичный пример. И тем не менее вопрос лишь в том, чего будет ожидать кодер после некоторой практики с классами от переопределения свойств стиля background? Логичнее ожидать такое же поведение, собственно оно и присутствует в большинстве браузеров.
background неявно изменяет все background-... свойства.Ну вот в этом и проблема, то что в этом примере ие делает это криво. Иначе, мы условно могли бы считать все свойства background-а такими же независимыми как и margin с padding-ом.
неявно присутствует цвет transparentАга, должен присутствовать, только почему-то реально не присутствует. Вот это мы и называем багом.
Именно, что присутствует прозрачный, через который просвечивает фон таблицы (!).
Просто в IE tr и td «разделяют одно пространство для фона».
Т.е. в картинке http://www.w3.org/TR/CSS21/images/tbl-layers.png как бы «склеены» три верхних слоя.
Просто в IE tr и td «разделяют одно пространство для фона».
Т.е. в картинке http://www.w3.org/TR/CSS21/images/tbl-layers.png как бы «склеены» три верхних слоя.
Ну это ты справедливо оспорил, согласен
Но сути это не меняет, неявно мы его конечно задаём в виде transparent,но в конечном результате не задумываясь ожидаем,что он не должен влиять на явно заданный red. А это равносильно ситуации, если бы мы не задавали его вообще никак, ни явно, ни неявно.
Но сути это не меняет, неявно мы его конечно задаём в виде transparent,но в конечном результате не задумываясь ожидаем,что он не должен влиять на явно заданный red. А это равносильно ситуации, если бы мы не задавали его вообще никак, ни явно, ни неявно.
Слушай, я не спорю, да просвечивает, да transparent, да слои, да не надо путать. Что пытаешься объяснить-то мне? Докопался к явно ошибочной моей фразе, ну дык я и не оспариваю. И вообще я этой фразой хотел выразить лишь более поверхностный смысл для пользователя, которому рано запариваться про такие тонкости, существуют более существенные моменты на которые выгоднее ему потратить время.
Просто в IE tr и td «разделяют одно пространство для фона».Вот это и нарушает логику его поведения. Для нас это выражается в выше описанном баге.
Оставить комментарий
Vladislav177Rus
Почему IE при указании дочернему TD картинки фона (прозрачный гиф) не использует background TR, а Firefox использует? Чье поведение правильное и как лучше добиться результата FF?