HTML5, CSS проблема отображения фонового изображения в IE - PullRequest
Новая
       0

HTML5, CSS проблема отображения фонового изображения в IE

0 голосов
/ 31 августа 2011

Я довольно долго искал переполнение стека, и все решения, относящиеся к этому, не решают мою проблему.

Поэтому я пытался загрузить фоновое изображение на элемент figure.Это работает в Firefox, Chrome, Opera и Safari ... но, конечно, IE9 / 8/7 мешает мне в голове. 

<figure id="mainlogo">
</figure>

со стилями 

figure#mainlogo {
  background: url(../images/logocrop.png) no-repeat center;
}

Я попытался использовать div вместо фигуры, установить его в качестве блока отображения, избавиться от идентификатора и почти все, что я могу найти в сети.Кроме того, я попытался разделить его на отдельные стили CSS: background-color, background-image и т. Д.

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

<!DOCTYPE html>
<html>
<head>
</head>
<body>    
  <figure style="background: url(../images/logocrop.png) no-repeat center; height:40em; width:55em;"></figure>
</body>
</html>

Я также попробовал другие типы документов, просто чтобы убедиться, что это тоже не так.Когда я устанавливаю цвет фона перед ним, он будет отображаться.Во всяком случае, у меня есть чувство, что это может оказаться чем-то довольно очевидным и / или легким ... Заранее спасибо и извините за приставание, если это выяснилось.

Ответы [ 4 ]

1 голос
/ 31 августа 2011

Вы можете использовать HTML5 Shiv, чтобы IE <9 распознавал новые элементы. </p>

Просто добавьте это к вашему HEAD. 

<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->
0 голосов
/ 31 августа 2011

Я заставил его работать, но, похоже, единственный способ, которым IE распознает рисунок, - это сначала создать элемент с помощью document.createElement ("figure"), а также УДАЛИТЬ идентификатор. Это будет стиль с CSS, просто нацеливаясь на фигуру, но это пугает, если присутствует идентификатор. Пример того, что я сделал, здесь: http://jsfiddle.net/pdq7u/5/ и документация здесь: http://ejohn.org/blog/html5-shiv/.

<script>document.createElement("figure");</script>
<style>

figure{
       background:pink url(http://ejohn.org/files/jeresig-wordpress-sm.jpg) no-repeat center; 
    height:200px; 
    width:1000px;
    border:1px solid red;
    display:block;
    }
</style>
<figure>&nbsp;</figure>

Обратите внимание, что вам также нужно иметь блок отображения, чтобы IE не рассматривал его как встроенный элемент.

0 голосов
/ 31 августа 2011

Internet Explorer не может стилизовать элемент фигуры (он не поддерживается в большинстве версий).Я не уверен насчет самой новой версии IE, хотя она может работать там.

0 голосов
/ 31 августа 2011

Я написал так, и он работал на IE 9 без проблем (я изменил имя изображения для меня): 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
figure#mainlogo {background: url(../images/header.png) no-repeat center; height:200px; width:1000px;}
</style>
</head>
<body>    
<figure id="mainlogo"></figure>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...