Что заставляет это фоновое изображение отображаться «неправильно» в Opera и Firefox? - PullRequest
Новая
       14

Что заставляет это фоновое изображение отображаться «неправильно» в Opera и Firefox?

2 голосов
/ 12 мая 2010

Я знаю, что это, вероятно, я делаю неправильно, поэтому, пожалуйста, не поджигайте меня для заголовка темы.

Я пытаюсь собрать небольшой персональный сайт, используя HTML 5 / CSS3. Я проверил с помощью валидатора w3c, и файл сайта и CSS полностью соответствуют в соответствии с валидатором (однако к валидатору прилагается предупреждение, что он может быть не идеальным).

Я не уверен, как объяснить это без картинки, поэтому вот сравнение Chrome / Opera / Firefox: image

Итак, вы можете видеть, как в Chrome фоновое изображение находится в одном неповторяющемся фрагменте, тогда как в Opera / Firefox изображение, как ни странно, было разбито и размещено немного по-другому.

Я уверен, что это связано с ошибкой с моей стороны, но мне совсем не повезло понять, почему изображение искажается в Opera и Firefox.

Вот CSS, который имеет отношение к этой проблеме: 

/* Content Pane */         
.content
{           position: absolute;
            left: 220px;
            width: 800px;
            top: 80px;
            min-height: 550px;
            background-color: rgba(8,12,42,0.85);
}

/* Headers */
.content hgroup 
{
            background: url("Header_Flat.png") no-repeat left top;
            min-height: 38px;
            padding-left: 28px;
            text-shadow: 0 0 8px #FFA9FF;
            color: Black;   
            text-decoration: none;  
}

.content hgroup h1 
{
            display: block;
}

.content hgroup h3
{
            display: inline;
            position: relative;
            top: -12px;
            left: 20px;
            text-shadow: 0 0 6px #AFF9FF;
}

.content hgroup h4
{
            display: inline;
            position: relative;
            top: -12px;
            left: 20px;
            font-size: xx-small;    
            text-shadow: 0 0 6px #AFF9FF;
}

И HTML: 

<hgroup> 
    <h1>New Site!</h1> 
    <h3>Now with Bloom!</h3> 
    <h4> - Posted Tuesday, May 11th 2010</h4> 
</hgroup>

Кто-нибудь может увидеть, что я делаю не так?

EDIT

Я немного изменил CSS, и он наполовину исправил изображение (я не понимаю, почему) и плохие выравнивания (я еще этого не заметил).

image

Изменены следующие CSS-определения: 

/* Headers */
.content hgroup 
{
            background: url("Header_Flat.png") no-repeat left top;
            min-height: 38px;
            position: relative;
            text-shadow: 0 0 8px #FFA9FF;
            color: Black;   
            text-decoration: none;  
}

.content hgroup h1
{
            position: relative;
            left: 28px;
}

.content hgroup h3
{
            display: inline;
            position: relative;
            top: -12px;
            left: 48px;
            text-shadow: 0 0 6px #AFF9FF;
}

.content hgroup h4
{
            display: inline;
            position: relative;
            top: -12px;
            left: 48px;
            font-size: xx-small;    
            text-shadow: 0 0 6px #AFF9FF;
}

Ответы [ 4 ]

2 голосов
/ 12 мая 2010

Понял: нужно дать hgroup display: block.

РЕДАКТИРОВАТЬ: имейте в виду, что большинство браузеров еще не знают новые элементы HTML5, поэтому им не хватает всех стилей по умолчанию.

0 голосов
/ 28 апреля 2012

выравнивание фонового изображения CSS доступен не во всех браузерах. Это как если бы у вас было только: 

.content hgroup 
{
background: url("Header_Flat.png") no-repeat;
etc.

Поскольку hgroup не имеет заданного размера, фоновое изображение будет плавать, когда вы используете разные браузеры с разным увеличением.

Если вы можете установить размер hgroup, вы можете создать свой .png размер hgroup, прозрачный и с синими полосами вверху слева.

Я также с нетерпением жду полной поддержки CSS3 во всех браузерах.

Есть так много эффектов, которые выглядят так круто в одних браузерах, а потом просто выглядят изуродованными в других. Я лично предпочитаю 1) Firefox 2) Safari

0 голосов
/ 12 мая 2010

Только что посмотрел в Chrome и Firefox, и они оба отображают то же, что и ваш рисунок ошибки.

Взгляните сюда: Контрольный список поддержки браузера HTML5 , кажется, что Firefox и Opera еще не поддерживают все атрибуты HTML5, поэтому неизбежно возникают некоторые странные проблемы. Браузеры пока не знают всех стилей по умолчанию для элементов HTML5, поэтому больше причин для странных ошибок. Не могу думать ни о каких других исправлениях, кроме ответа DavidYell, в CSS все выглядит хорошо.

0 голосов
/ 12 мая 2010

Вам нужно установить родительский элемент позиционированных дочерних элементов на relative, чтобы позиционирование работало. 

hgroup{
  position: relative;
}

Вашему h1 нужны ширина и высота, в противном случае display: block - это немного бессмысленный имхо.

Это две вещи, которые больше всего меня бросают в глаза:)

...