2

我怎样才能改变它？最上面的一个是 Firefox、Chrome 和 Safari 处理标题背景图像。下面是 IE 如何处理标题背景图像。火狐示例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;
}
4

4 回答 4

2

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

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

您可以尝试的另一个小技巧是设置zoom:1, 作为一种强制 IE 调整大小并使其行为更像其他浏览器的方法。

如果一切都失败了，你可以使用不间断的空格，这样 Internet Explorer 就没有地方换行了，像这样：

The&nbsp;Library&nbsp;at&nbsp;Celsus
于 2013-09-13T03:40:35.363 回答
1

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

.iview-caption {
    ...

    white-space: nowrap;
}
于 2013-09-13T06:14:27.730 回答
0

您可以使用 CSS 代码注释来解决这个问题。

例如，你可以这样说：

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

创建一个 ie.css 文件，您将在其中放置 ie 的自定义 css 代码。

或者你也可以使用这个：

<!--[if IE]>
    <style type="text/css">
       put your code here
    </style>
<![endif]-->
于 2013-09-13T02:09:31.507 回答
0

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

于 2013-09-13T02:22:19.937 回答