CSS изображение не отображается в сафари?

Question

следующий код не работает в Safari, но корректно работает в IE.

<style>
.my
{
background:url("../../myproject/images/add.gif");
width:100%;
height:22px;
background-repeat: no-repeat;
}
</style>
<span class="my">

</span>

Answer 1

По умолчанию элемент span равен display: inline, поэтому свойства height и width к нему не применяются.

Поскольку у него нет явных измерений и содержимого, оно отображается как 0 на 0. Это не оставляет места для того, чтобы иметь видимый фон.

Используйте другой элемент (по умолчанию блок) или измените свойство display на то, к которому применяются высота и ширина, чтобы заставить это работать.

Тем не менее, если вы просто создаете коробку без содержимого, есть очень хороший шанс, что вы просто должны использовать элемент img.

Answer 2

используйте backgound-image: url("../../myproject/images/add.gif"); или используйте ярлык background, начиная с цвета: background:transparent url(...) no-repeat;

И добавление display:block; позволит вам установить высоту и ширину элемента span, нобольше не будет соответствовать другому тексту.

Answer 3

Если IE работает, а Safari (и Firefox) нет, это, вероятно, означает, что IE не соответствует стандарту.

span, с одной стороны, не может иметь ширину и высоту.в некоторых более ранних версиях IE на самом деле вы имели ширину и высоту.

, поэтому вы можете изменить интервал на div, чтобы увидеть.

также всегда используйте современный тип документа, например HTML 4.01 или XHTML1.0, так что IE попытается использовать более стандартные методы рендеринга.

Answer 4

Вы должны использовать background-image: url(...); см. здесь