为什么IE对待我的png图像的方式与其他浏览器不同？

Question

我该怎么改变它？最重要的是Firefox，Chrome和Safari处理标题背景图像。最下面的是IE如何处理标题背景图像。

以下是我网页上图片的代码（我使用的是我在网上找到的图片幻灯片放映工具）：

<a href="BlogPosts.aspx" id="iview"> <!--When making a slide show, make sure the ID property is set to "iview" -->
    <!-- Slide 1 -->
    <div data-iview:image="placeImages/FLASH1-Ephesus.jpg">
    <!-- Caption 1 -->
        <div class="iview-caption" data-x="400" data-y="400" data-transition="wipeRight" data-speed="700"><h3>The Library at Celsus</h3>Ephesus, Turkey</div>
    </div>
    <!-- Slide 2 -->
    <div data-iview:image="placeImages/FLASH2-HAGIA.jpg">
    <!-- Caption 2 -->
        <div class="iview-caption" data-x="100" data-y="400" data-transition="wipeRight" data-speed="700"><h3>Hagia Sophia</h3>Istanbul, Turkey</div></div>
    <!-- Slide 3 -->
    <div data-iview:image="placeImages/FLASH3-Bosphorus.jpg">
    <!-- Caption 3 -->
        <div class="iview-caption" data-x="400" data-y="100" data-transition="wipeRight" data-speed="700"><h3>The Bosphorus Straits</h3>Istanbul, Turkey</div></div>
    <!-- Slide 4 -->
    <div href="About.aspx" data-iview:image="placeImages/FLASH4-BlueMosque.jpg">
    <!-- Caption 4 -->
        <div class="iview-caption" data-x="400" data-y="50" data-transition="wipeRight" data-speed="700"><h3>The Blue Mosque</h3>Istanbul, Turkey</div></div>
    <!-- Slide 5 -->
    <div data-iview:image="placeImages/FLASH5-Sirince.jpg">
    <!-- Caption 5 -->
        <div class="iview-caption" data-x="100" data-y="100" data-transition="wipeRight" data-speed="700"><h3>Sirince Village</h3>Sirince, Turkey</div></div>
</a>

以下是幻灯片工具使用的两个样式表中的相关代码：

皮肤1 / style.css：

.iview-caption {
    background: url('../../img/caption-bg.png');
    color: #FFF;
    border-radius: 7px;
    padding: 10px;
    font-family: Verdana;
    font-size: 12px;
    text-shadow: #000 1px 1px 0px;
}

以下是幻灯片演示工具的主要样式表：

iview.css

.iview-caption {
    position: absolute;
    z-index: 4;
    overflow: hidden;
    cursor: default;
}

Answer 1

这与.png文件无关......问题在于文本。

Internet Explorer与其他浏览器的文本定位规则略有不同。因此，您可能希望为样式表中的文本留出比您认为需要的更多空间，以适应IE的行为。看起来您可以将data-x和data-y值设置得稍大一点来解决这个问题。

您可以尝试的另一个小技巧是设置zoom:1，以强制IE获得正确的大小调整，并且表现得像其他浏览器一样。

如果所有其他方法都失败了，您可以使用不间断的空格，以便Internet Explorer无处可换行，如下所示：

The Library at Celsus

Answer 2

您可以将文本设置为不包装在css中。

.iview-caption {
    ...

    white-space: nowrap;
}

Answer 3

您可以使用CSS编码注释来解决此问题。

例如，你可以这样说：

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

创建一个ie.css文件，您可以将自定义css代码放在ie。

中

或者您也可以使用它：

<!--[if IE]>
    <style type="text/css">
       put your code here
    </style>
<![endif]-->

Answer 4

它因为你的标题标题被分成换行符而中断。我建议您在标题div中重置<h3>...</h3>。还要检查容器宽度;增加它，使你的标题有更多的空间来扩展。如果这无济于事，您可以与我们分享链接吗？