Блог

Главная - Вопросы по программированию - Internet Explorer не отображает изображение, загруженное с помощью CSS

Internet Explorer не отображает изображение, загруженное с помощью CSS

#html #css #internet-explorer #cross-browser

#HTML #css #internet-Explorer #кроссбраузерный

Вопрос:

Это мой HTML (CSS является частью HTML):

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <body>
        <div id='header'>

            <table id='headerBar'>
                <tr>
                    <td><a href ='#' id='homeIcon'></a></td>
                    <td><a href ='#' id='myProfileIcon'></a></td>
                    <td><a href ='#' id='settingsIcon'></a></td>
                </tr>
            </table>
        </div>
    </body>
</html>

<style>
    #homeIcon {
        content:url('shipping3.png');
    }
    #settingsIcon {
        content:url('shipping3.png');
    }
    #myProfileIcon {
        content:url('shipping3.png');
    }
</style>

Когда я открываю этот файл в Google Chrome, он работает отлично и отображает 3 изображения. Когда я открываю его в Internet Explorer, ни одно из 3 изображений не отображается (это просто пустая страница). Есть идеи, почему? (Я пробовал просматривать его в Internet Explorer 10, 9, 8 и 7. Ни одно из 3 изображений не отображается).

Комментарии:

1. Попробуйте изменить doctype на just <!DOCTYPE html> , IE7 и более ранние версии не поддерживают сгенерированный контент: reference.sitepoint.com/css/content

2. попробуйте использовать #anchor-id { display:block; background:url('image.png'); }

3. content предполагается, что оно используется с псевдоэлементами before или after , а не с самим элементом. developer.mozilla.org/en-US/docs/Web/CSS/content

4. Возможно, причина проблемы не в этом, но HTML-документ неправильно сформирован. Перед head тегом должен быть body тег, а style тег должен находиться внутри head тега.

Ответ №1:

Поскольку свойство content используется с псевдоэлементами ::before и ::after для создания содержимого в документе.

http://www.w3.org/wiki/CSS/Properties/content

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
    #homeIcon::after {
        content:url('http://www.placehold.it/200x200');
    }
    #settingsIcon::after {
        content:url('http://www.placehold.it/200x200');
    }
    #myProfileIcon::after {
        content:url('http://www.placehold.it/200x200');
    }
</style>
</head>
<body>
    <div id='header'>

        <table id='headerBar'>
            <tr>
                <td><a href ='#' id='homeIcon'></a></td>
                <td><a href ='#' id='myProfileIcon'></a></td>
                <td><a href ='#' id='settingsIcon'></a></td>
            </tr>
        </table>
    </div>
</body>
</html>

http://jsfiddle.net/w7c27/3/

Комментарии:

1. Вы не забыли несколько слов в первом предложении?

Ответ №2:

Я удалил большую часть кода и оставил пример.

 <td width="100" height="100" id='homeIcon'><a href ='#'></a></td>
<td><a href ='#' id='myProfileIcon'></a></td>
<td><a href ='#' id='settingsIcon'></a></td>

<style>
    #homeIcon {
       background:url("shipping3.png");
    }
...
</style>

Сам тег my не имеет размера, особенно когда он пустой. Это контейнер без ширины / высоты, в котором ничего нет.

По соображениям обратной совместимости правильный синтаксис для привязки изображения в качестве фона — background: url(«shipping3.png»)

Я добавил ширину и высоту строки in, чтобы было проще наблюдать, где мы их указываем.

Комментарии:

1. работает ли это в вашем Google Chrome и IE? Фон, похоже, не работает ни в одном из двух браузеров для меня, независимо от того, указываю ли я высоту / ширину или нет. Когда я использую background, ничего не отображается. Когда я использую контент, он отображается в Chrome, но не в IE.

Ответ №3:

Вы можете просто использовать background: url() для добавления изображения. Поскольку тег a был пуст, поэтому в IE он не отображал изображение. Поехали

 <!DOCTYPE html>
<html>
<head>
<style>
    #homeIcon {
        background:url('shipping3.png');
        height:300px;
        width:100px;

    }
    #settingsIcon {
        background:url('shipping3.png');
    }
    #myProfileIcon {
        background:url('shipping3.png');
    }
</style>
</head>
    <body>
        <div id="header">
            <table id='headerBar'>
                <tr>
                    <td><a href ="#" id="homeIcon">Lorem Ipsum</a></td>
                    <td><a href ="#" id="myProfileIcon"></a></td>
                    <td><a href ="#" id="settingsIcon"></a></td>
                </tr>
            </table>
        </div>
    </body>
</html>

Комментарии:

1. хм, выполнение background: url(‘shipping3.png’); и присвоение ему ширины и высоты у меня не работает ни в Chrome, ни в IE. Ничего не отображается .. у вас это работает в вашем Chrome? Даже если внутри тега a нет текста?