1

我正在为一个项目创建一个网站，并且我使用百分比来浮动我的 div，以实现跨多个分辨率/浏览器的交叉兼容性。它似乎适用于 Firefox、Safari 等，但主要问题来自 IE 9。这些项目似乎留在左上角。有任何想法吗？

CSS：

#center-container {
    width: 960px;   
    height: 100%;
    margin:0 auto;
}
img#google {
    padding-top: 17%;   
    padding-left:35%;
    margin: 0 auto;     
}
form#searchBox {
    padding-top: 25px;
    padding-left:25%;
    margin: 0 auto; 
}
#buttons {
    padding-top: 20px;
    padding-left: 40%;  
}

HTML：

<div id = "center-container"> 
<img id="google" src="images/google.png" width="275" height="95" />
<form id="searchBox">
    <input type="text" id = "search" name="search" size="85"/><br />        
</form>
<div id="buttons">
    <a href="javascript:void(0)" onClick="searchCensor()" class="button">Google Search</a>
    <a href="#" class="button">I'm Feeling Lucky</a>
</div>

</div>

网站：andrewgu12.kodingen.com/history

4

3 回答 3

2

您缺少 DOCTYPE 语句，因此 IE 处于怪癖模式

http://www.quirksmode.org/css/quirksmode.html

使用 doctype，即使是 HTML5 doctype 也能​​正常工作。

<!DOCTYPE html>
于 2012-04-24T03:40:22.333 回答
0

我在 IE8 中打开了您的页面，发现它正在以 Quirks 模式呈现。当切换到标准模式时，所有的填充效果都很好，看起来和我在 Firefox 中的效果一模一样。

当您没有正确的 Doctype 时，Quirks Mode 将激活。添加一个，你应该没问题。

于 2012-04-24T03:40:34.817 回答
0

您不会添加 doctype... IE 默认不支持很少的 css 属性...所以我们必须使用 doctype 明确地使其接受..

所以使用，

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 过渡//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

它会工作...

于 2012-04-24T03:44:11.287 回答