Question

我有一个可以在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;
}

在我的代码段中有四个部分。首先，“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中运行该网站，您会注意到搜索框下方的英语语言按钮不在标题右侧的黄色横幅中，这是渲染问题。

谢谢，

Answer 1

我通过持续的反复试验找出了问题所在。基本上，IE读取我的HTML与其他浏览器不同。通过以不同的方式对我的html页面中的信息进行排序，IE能够正确地呈现它。顺序如下：

container，div float：left，div float：right，middle info

最初，我有以下内容：

container，div float：left，middle info，div float：right

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

Answer 2

使用CSS重置表（例如这一个=＆gt; http://meyerweb.com/eric/tools/css/reset/）。

还可以将样式与HTML标记分开（ditch div align =“center”和字体标记。用适当的CSS替换它们。）

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

除了IE之外，CSS Float在所有浏览器中工作

2 个答案: