Question

以下脚本显示某些文本旁边的图像。它不适用于IE7。应该如何修改？感谢

<style type="text/css">

    div {width:200px}
    div span {
        padding: 0 5px 0 30px;
        background-image: url("bg.gif");
        background-position:center; 
        background-repeat: no-repeat;   
    }

</style> 


<body>
    <div>Text 1<span></span></div>
    <div>Text 2<span></span></div>
    <div>Text 3<span></span></div>
</body>

Answer 1

您是否在html页面中指定了doctype？ e.g：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Answer 2

div, div > span{
    display:inline;
    float:left;
}

我根据您的问题，浏览器问题和HTML提供了一小部分脚本。我建议将此代码放在HTML IE7条件下：

<!--[if IE7]-->
    <!-- your CSS here -->
<!--[endif]-->

这将删除所有浏览器的CSS。

Answer 3

看起来我不应该使用背景图片。

<style type="text/css">
    div img.image {
        padding-left: 15px;
    }

</style> 


<body>
    <div><span>Text 1</span><img class="image" src="bg.gif" /></div>
    <div><span>Text 2</span><img class="image" src="bg.gif" /></div>
    <div><span>Text 3</span><img class="image" src="bg.gif" /></div>
</body>

使用IE7在文本旁边显示图像

3 个答案: