Почему изображение не отображается в Div в IE8 -- html поле с участием css поле с участием internet-explorer-8 пол Связанный проблема

Why image doesn't show up within a DIV in IE8


0
vote

проблема

русский

У меня есть следующие HTML:

 <код> <!-- default stylesheets --> <link rel="stylesheet" type="text/css" href="theStyles/defaultStyle.css">  <!-- if ie version 9 or less -->  <!--[if lte IE 9]> <link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_ie.css"> <![endif]-->  <div id="subpageHeaderImageSection">     <div id="subpageHeaderLeft">         <img id="igm" src="theImages/subpageHeaderImage.png" />     </div> </div>   

Defaultstyle.csss :

 <код> #subpageHeaderImageSection {     position: relative;     top: 0;     width: 100%;     height: 400px; } #subpageHeaderLeft {     position: absolute;     left: 0;     float: left;     width: 100%;     height: 100%;     background: url('../theImages/subpageHeaderImage.png') no-repeat;     background-size: 100% 100%; } #igm {     display: none; }   

Defaultstyle_ie.css :

 <код> #subpageHeaderImageSection {     position: relative;     top: 0;     left: 0;     width: 100%;     height: 400px; } #subpageHeaderLeft {     position: absolute;     left: 0;     top: 0;     float: left;     height: 100%;     width: 100%;     background: none; } #igm {     width: 100%;     height: 100%;     max-width: 100%;     max-height: 100%;     top: 0;     left: 0; }   

Мне пришлось добавить изображение для IE, потому что <код> background-size: свойство еще не поддерживается.

Если я удалю <код> display: none из <код> null0 , IE8 отображается правильно, но другие браузеры полностью протягивают изображения полностью. Если я буду держать его, другие браузеры отображают его правильно, но IE8 не отображает изображение вообще.

Как исправить выше, так что это работает для всех браузеров?

Английский оригинал

I have the following HTML:

<!-- default stylesheets --> <link rel="stylesheet" type="text/css" href="theStyles/defaultStyle.css">  <!-- if ie version 9 or less -->  <!--[if lte IE 9]> <link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_ie.css"> <![endif]-->  <div id="subpageHeaderImageSection">     <div id="subpageHeaderLeft">         <img id="igm" src="theImages/subpageHeaderImage.png" />     </div> </div> 

defaultStyle.css:

#subpageHeaderImageSection {     position: relative;     top: 0;     width: 100%;     height: 400px; } #subpageHeaderLeft {     position: absolute;     left: 0;     float: left;     width: 100%;     height: 100%;     background: url('../theImages/subpageHeaderImage.png') no-repeat;     background-size: 100% 100%; } #igm {     display: none; } 

defaultStyle_ie.css:

#subpageHeaderImageSection {     position: relative;     top: 0;     left: 0;     width: 100%;     height: 400px; } #subpageHeaderLeft {     position: absolute;     left: 0;     top: 0;     float: left;     height: 100%;     width: 100%;     background: none; } #igm {     width: 100%;     height: 100%;     max-width: 100%;     max-height: 100%;     top: 0;     left: 0; } 

I had to add an image for the IE because the background-size: property is not yet supported.

If I remove the display: none from the defaultStyle.css, the IE8 shows it correctly but the other browsers stretches the images fully. If I keep it, the other browsers displays it correctly but IE8 doesn't display the image at all.

How do I fix the above so it works for all browsers?

</div
        

Список ответов

1
 
vote
vote
Лучший ответ
 
<Р> размер управления Для того, чтобы в то есть & LT; 9 Вы должны использовать свойство фильтра в CSS
 <код> filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/myimage.png', sizingMethod='scale');   
<Р> и по-прежнему использовать фон-размер. Он будет читать фоновый размер 100% в этом случае и использовать его
 

To control size in ie < 9 you must use the filter property in css

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/myimage.png', sizingMethod='scale'); 

and still use background-size. It will read the background-size of 100% in this case and use it

</div
 
 
         
         

Связанный проблема

1  Добавление события onload для GridView  ( Adding an onload event for a gridview ) 
У меня есть одна сетка, вот HTML-код: <код> <table cellspacing="0" border="1" style="border-collapse:collapse;" id="grid1" rules="all"> <tbody><t...

0  У меня проблема с переполнением моей контактной формы при отображении на мобильном  ( Im having an issue with my contact form overflowing when displayed on a mobile ) 
Выпуск в основном, когда у меня есть эта форма, отображаемая на мобильном телефоне, когда я перехожу на ввод текста в форму, Textarea слишком много расширяетс...

-1  Перемещение и переименование загруженного файла  ( Moving and renaming an uploaded file ) 
Извините, если это легко, но я немного нового для программирования, поэтому у меня проблемы с переименованием временного загруженного файла. Вот мой код: ht...

1  JavaScript: Получение идентификатора родителя из документа  ( Javascript getting the id of the parent from a document ) 
У меня возникли проблемы с тем, чтобы получить идентификатор родителя документа, который здесь «iFrame1». Как вы можете видеть, что JavaScript должен проживат...

0  Конвертировать GNOME-HELP (YELP) XML в статический HTML с XSLT  ( Convert gnome help yelp xml to static html with xslt ) 
Некоторые из приложений GNOME на Linux используют браузер справки под названием <код> yelp . Например, Gnome-Calculator, <Код> gcalctool , имеет свои файлы сп...

1  Удалить таблицу TR при сохранении AddClass  ( Remove table tr while maintaining addclass ) 
Хорошо, у меня есть таблица TR, которая удаляется, когда вы нажимаете кнопку. Я использую Animate.css и хотел бы добавить класс после того, как мой запрос AJA...

13  Отправьте данные FORM HTML в базу данных SQL через PHP (используя mysqli)  ( Send html form data to sql database via php using mysqli ) 
Я хочу отправить данные, введенные в HTML-форму в мою базу данных SQL, то есть создайте новую строку, приписываю определенные значения в определенные столбцы....

0  Группировка элементов Markdown в элементе div или пользовательской теги HTML  ( Grouping markdown elements in to div element or custom html tag ) 
Я использовал Jeykll Tool для генерации контента отметки вниз в HTML. Я хочу группировать ниже элементы отметки вниз в элемента Div или любой другой пользов...

0  Как сделать раскрывающееся меню горизонтальное  ( How to make a drop down menu horizontal ) 
Я не уверен, что это возможно, но у меня есть кнопка, называемая фруктами. Когда я нажимаю на него, 4 фруктовые кнопки появляются вертикально вниз, но я хочу,...

3  Как поставить DIV в центре другого дивы?  ( How to put a div at center of another div ) 
Я хотел бы иметь один div в центре другого div горизонтально. <код> <div id="container"> <div id="centered"> hello world; </...

6  Предотвращение подачи двойной формы [дубликат]  ( Preventing double form submissions ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> Этот вопрос уже есть ответы здесь : ...

0  Маржа не действует должным образом в Firefox  ( Margin not acting properly in firefox ) 
У меня очень странная проблема, что за жизнь меня я могу решить. По сути, в Safari My Top Navigation не имеет верхнего поля и является промывкам с самой верхн...

31  Обнаружение первого и последнего элемента внутри Groovy каждая крышка {}  ( Detecting first and last item inside a groovy each closure ) 
Я использую Groovy's Handy Markupbuilder для создания HTML-страницы из различных исходных данных. Одна вещь, которую я изо всех сил пытаюсь сделать красиво,...

30  Как я могу использовать Nodejs с Windows 7? [закрыто]  ( How can i use nodejs with windows 7 ) 
<в сторону CLASS = "S-NEWACTS S-WELTIVE__info JS-Post-New Imide MB16« Роль = «Статус»> <Путь d = "M15 6.38A6.48 6.48 0 007.78. 04H-.02A6.49 6.49 0 002.05 ...

0  Скрывая неупорядоченный список, когда у него нет элементов  ( Hiding an unordered list when it has no elements ) 
У меня есть проблема, которая кажется сначала, как общий язык No-Brainer и легкая задача. У меня есть плагин JavaScript на моей странице, который генерирует...

Связанный проблема

1  Добавление события onload для GridView 
0  У меня проблема с переполнением моей контактной формы при отображении на мобильном 
-1  Перемещение и переименование загруженного файла 
1  JavaScript: Получение идентификатора родителя из документа 
0  Конвертировать GNOME-HELP (YELP) XML в статический HTML с XSLT 
1  Удалить таблицу TR при сохранении AddClass 
13  Отправьте данные FORM HTML в базу данных SQL через PHP (используя mysqli) 
0  Группировка элементов Markdown в элементе div или пользовательской теги HTML 
0  Как сделать раскрывающееся меню горизонтальное 
3  Как поставить DIV в центре другого дивы? 
6  Предотвращение подачи двойной формы [дубликат] 
0  Маржа не действует должным образом в Firefox 
31  Обнаружение первого и последнего элемента внутри Groovy каждая крышка {} 
30  Как я могу использовать Nodejs с Windows 7? [закрыто] 
0  Скрывая неупорядоченный список, когда у него нет элементов