2

提前感谢您可以为我提供的任何帮助 - 我正在努力让这个页面为我的慈善网站工作。它在除 IE 之外的所有浏览器中看起来都很完美。在 IE 中，应该浮动在其他图像旁边的长的垂直图像没有水平对齐。

你可以在这里看到它：www.worldofchildren.org

在此处引用外部样式表：

<link rel="stylesheet" href="/bannerincludes/boxes.css" type="text/css" media="screen">

这是页面上的代码：

<div style="width:868px;">
<div style="float:left; position: relative;margin-left:25px; margin-top:20px;width:533px;"">
<h1 style="font-family: Adobe Garamond Pro, Garamond, serif; font-size: xx-large; font-weight: 500;
color: #0D9B89;
padding: 0px 0px 0px 0px; line-height:90%;">meet the 2012 honorees</h1>

<div style="float:left;">


<div class="hover-div1" style="margin-right:6px; margin-bottom:6px; float:left;">
<img src="http://www.worldofchildren.org/images/banner/dallas.jpg">
<div class="hover-text"><a href="http://www.worldofchildren.org/honorees/393" style="color:#fff;">Dallas Jessup <br> 2012 Youth Award Winner</a></div>
</div>


<div class="hover-div2" style="margin-right:6px; margin-bottom:4px; float:left;">
<img src="http://www.worldofchildren.org/images/banner/craig.jpg" >
<div class="hover-text"><a href="http://www.worldofchildren.org/honorees/395" style="color:#fff;">Craig Kielburger <br> 15th Anniversary Achievement Award Winner</a></div>
</div>

<div class="hover-div3" style="margin-bottom:6px; float:left;">
<img src="http://www.worldofchildren.org/images/banner/alina.jpg">
<div class="hover-text"><a href="http://www.worldofchildren.org/honorees/396" style="color:#fff;">Alina Cho <br> 2012 Board of Governors' Award Winner</a></div>
</div>
<br>
<br>

<div class="hover-div4" style="margin-right:5px; margin-bottom:5px;float:left;">
<img src="http://www.worldofchildren.org/images/banner/dryoung.jpg" >
<div class="hover-text"><a href="http://www.worldofchildren.org/honorees/390" style="color:#fff;">Dr. Nilas Young <br> 2012 Health Award Winner</a></div>
</div>


<div class="hover-div5" style="margin-bottom:5px;float:left;">
<img src="http://www.worldofchildren.org/images/banner/kyle.jpg" >
<div class="hover-text"><a href="http://www.worldofchildren.org/honorees/392" style="color:#fff;">Kyle Weiss <br> 2012 Youth Award Winner</a></div>
</div>
</div>

<div style="float:right !important;">
<div class="hover-div6" style="margin-bottom:5px;">
<img src="http://www.worldofchildren.org/images/banner/benito.jpg" >

<div class="hover-text"><a href="http://www.worldofchildren.org/honorees/391" style="color:#fff;">
Beno&#238;t Duch&#226; teau-Arminjon<br> 2012 Humanitarian Award Winner</a></div>
</div>

</div>
</div>




<div style="float:right; margin-top:20px;margin-right:30px; ">
<h1 style="font-family: Adobe Garamond Pro, Garamond, serif; font-size: xx-large; font-weight: 500;
color: #0D9B89;
padding: 0px 0px 0px 0px; line-height:90%;">15th annual awards</h1>

<p style="max-width:250px; font-family:helvetica;sans-serif; font-size:14pt;color:#777; font-weight:lighter; line-height:100%;">Join us as we celebrate the work of six exceptional heroes who have dedicated their lives to serving children in need. Much more than a ceremony, our Awards change the lives of those who attend and the children our Honorees serve.</p>
<br>
<center><a href="http://www.worldofchildren.org/awardsceremony.html"><img src="http://www.worldofchildren.org/images/banner/lm.jpg" border="0"></a><br>

Interested in Sponsorship Opportunities?<br>
<a href="http://www.worldofchildren.org/sponsorships">Click here</a>
</center>

</div>



</div>
4

3 回答 3

2

在您向左浮动的 DIV 上放置一个宽度width: 420px;（第一块框）。即使它是浮动的，IE 也会给它它的父级的全宽，所以右边的框没有空间。

于 2012-09-12T19:48:18.990 回答
2

为您的浮动容器添加宽度。现在，你没有宽度，IE 正在用你的左浮动元素填充内联空间。

要在 IE 中调试这些东西，可以使用 IE 开发者工具。

  1. 在 IE 中，按 F12 键。
  2. 在开发者工具中，点击左上角的“鼠标”图标。这是您的选择器工具。
  3. 将选择器工具选择您遇到问题的网站区域。

在您的情况下，您可以看到浮动的左侧元素太宽，因为它的宽度当前是动态的。IE 正在使它填充 100% 的水平区域。

于 2012-09-12T19:48:46.337 回答
-1

而不是浮动，这在 IE9 中有效

position: absolute;
right: 0;
bottom: 0;
于 2012-09-12T19:51:32.107 回答