CSS Float 适用于除 IE 以外的所有浏览器答案

【问题标题】：CSS Float Working in All Browsers Except IECSS Float 适用于除 IE 以外的所有浏览器
【发布时间】：2011-08-11 13:10:59
【问题描述】：

我有一个可以在 Safari、FF、Chrome 和 Opera 中完美呈现的网站。但是，在 IE 中，我的网站呈现略微偏离。

HTML：

<div align="center" id="headerdiv"><div id="log"><font id="subtitleAttribs"     onclick="login()">Login أدخل حساب</font></div>
<a class="infoHme"><font id="titleAttribs" onclick="home()">T h e<font color="#999999" size="6px"> | </font>A r t i s a n a t<font color="#999999" size="6px"> | </font>N e t w o r k</font><span>Home دار</span></a>
<div id="lang"><font id="subtitleAttribs" onclick="arb()">العربية</font><font color="#999999"> | </font><font id="subtitleAttribs" onclick="eng()">English</font></div></div>

CSS：

#log
{
  float: left;
  padding: 5px;
}
#lang
{
  float: right;
  padding: 5px;
}
#titleAttribs
{
  color: #6699cc;
  font-size: 26px;
}
#headerdiv
{
  background-color: #faf8cc;
  margin: 0px 45px 0px 45px;
}

在我的代码 sn-p 中有四个部分。首先，“headerdiv”是容器。其次，“log”是应该在左边的 div。第三，“titleAttribs”是位于中间的文本。第四，“lang”是应该在右边的div。

“log”和“lang”浮动，以便它们位于“titleAttribs”文本的每一侧。我的问题是，在 IE 中，“lang”最终呈现在右侧的“log”和“titleAttribs”下方。我用 Mac 测试我的代码，所以我很难在 IE 中测试。当我使用 PC 并在 IE9 中运行 .html 和 .css 文件时，一切都呈现得很好。但是，当我从互联网访问我的网站时，IE 出现了渲染问题，这让我更难以解决。

有没有人知道一个简单的方法来纠正这个问题而不必做太多的改变。我知道我可以添加宽度，但是我没有运气。另外，网站网址是： http://www.imkenliya.com/artisan_network.html

如果你在IE中运行网站，你会注意到搜索框下方的英文按钮不在标题右侧的黄色横幅中，这就是渲染问题。

谢谢，

【问题讨论】：

您介意发布链接或 jsfiddle 吗？
@多半是 IE 宽度过大，请使用开发者工具栏广告检查
感谢您的建议。我尝试更改宽度，并在 IE 中使用了开发人员工具，但我无法获得与在所有其他浏览器中相同的外观。我什至尝试将所有三个 div 标签浮动到左侧，然后更改它们的宽度以模仿网页顶部的完整条。但是，当使用不同大小的浏览器窗口时，它看起来很糟糕。幸运的是，我有一个警告说可以使用除 IE 之外的任何浏览器。这主要是因为 CSS3 过渡。

标签： css internet-explorer css-float

【解决方案1】：

使用 CSS 重置表（比如这个 => http://meyerweb.com/eric/tools/css/reset/）。

还将样式与 HTML 标记分开（抛弃 div align="center" 和字体标签。用适当的 CSS 替换它们）。

如果这不能解决问题，请提供该网站的链接。

【讨论】：

感谢您的建议。重置表没有解决问题，但你关于清理我的 html 的评论让我做了一些春季大扫除。无论如何，IE 仍然不知道如何描绘我的网站，但至少所有其他浏览器都知道。

【解决方案2】：

我通过不断的反复试验发现了我的问题。基本上，IE 以不同于其他浏览器的方式读取我的 html。通过对我的 html 页面中的信息进行不同的排序，IE 能够正确呈现它。排序如下：

容器，div 浮动：左，div 浮动：右，中间信息

最初，我有以下内容：

容器，div 浮动：左，中间信息，div 浮动：右

这似乎是合乎逻辑的，但对 IE 来说却不是。此外，其他浏览器仍然可以正确呈现我的 html。

【讨论】：