0

好的，我在图像上设置 25% 的 IE 和宽度值时遇到问题。我怎样才能解决这个问题？

IE 9 的图像如下所示：

IE9 显示错误！

这是它应该是什么样子的图像，以及它在所有其他浏览器中的外观：（Chrome、Opera、Firefox、Safari）：

图片应该是怎样的！

我为此使用的代码如下......

HTML：

<html>
    <head>
        <title>2013 Conference Test Page</title>
        <link rel="stylesheet" type="text/css" href="css/index.css" />
    </head>
<body>

<div class="header">
    <div style="width: 100%;">
        <img class='header_img' src='images/image1.jpg' />
        <img class='header_img' src='images/image2.jpg' />
        <img class='header_img' src='images/image3.jpg' />
        <img class='header_img' src='images/image4.jpg' />
    </div>
    <div class="header_text big_text"><div>SAVE THE DATE!</div><div style="margin-top: -.2em;">2013 OFN CONFERENCE</div>
    </div>
    <div class="header_text" style="margin-top: -.2em;">
        <p class="medium_text"><span style="padding-right: 15px;">October 15-18, 2013</span> &bull; <span style="padding-left: 15px;">Philadelphia, PA</span>
    </div>
    <div class="header_text">
        <p style="padding: 0px 10% 1.5em; line-height: 1.5em;">Join us for this year's conference at the Philadelphia Marriot Downtown, just steps away from historic sites, great cultural destinations, and Opportunity Finance Network's own headquarters!  Registration opens in August, 2013.</p>
    </div>
</div>

</body>
</html>

CSS：

html,body
{
    margin:0 0 0 0;
    padding:0 0 0 0;
}

.header
{
    background-color: #049EAB;
    width: 100%;
}

@font-face {
    font-family: hnc_font;
    src: url('../fonts/hnc.eot');
    src: local('hnc_font'), url('../fonts/hnc.woff') format('woff'), url('../fonts/hnc.ttf') format('truetype'), url('../fonts/hnc.svg') format('svg');
    font-weight: normal;
}

.header_img
{
    width:25%;
    height:auto;
    float:left;
}

.header_text
{
    width: 100%;
    text-align: center;
    color: white;
}

.medium_text
{
    text-shadow: 1px 1px 2px black;
    font-size: 1.5em;
    font-family: hnc_font;
}

p
{
    font-family: Arial, Helvetica, Verdana, Tahoma;
}

.big_text
{
    text-shadow: 2px 2px 4px black;
    font-size: 5.5em;
    font-family: hnc_font;
}

检测到的问题：

  1. 顶部的 4 个图像没有拉伸到屏幕的宽度。TBH，这是图像正在缩小的非常奇怪的行为。每次显示时，他们似乎都将前一个图像的大小缩小了 25%，而不是屏幕的宽度。奇怪的！
  2. 使用 @font-face 在 CSS 中嵌入字体甚至在 IE 中都不起作用。该字体是 Helvetica 衍生风格的字体。在第二张图片中看起来完全一样，但在 IE 9 或任何版本的 IE 中看起来都不正确。我正在使用 .eot 字体，但它似乎被 IE 忽略了（根据文档，它应该在 IE 浏览器中工作）。
  3. CSS3 text-shadow 属性不起作用，有没有办法让使用 IE 浏览器的用户获得这种效果？

我如何解决，至少，问题 1 和 2 与 IE？对于问题 #1：我应该改用桌子吗？这是唯一的方法吗？

编辑

我对代码进行了以下更改：

HTML：

<div style="width: 100%; overflow: hidden;">
    <div class="image"><img class='header_img' src='images/image1.jpg' alt="" /></div>
    <div class="image"><img class='header_img' src='images/image2.jpg' alt="" /></div>
    <div class="image"><img class='header_img' src='images/image3.jpg' alt="" /></div>
    <div class="image"><img class='header_img' src='images/image4.jpg' alt="" /></div>
</div>

CSS：

div.image
{
    width: 25%;
}

.header_img
{
    max-width: 100%;
    height: auto;
    float: left;
}

现在，这将图像彼此叠加而不是并排显示：

IE：

IE9 相互叠加

所有其他浏览器：

在此处输入图像描述

4

0 回答 0