Question

我正在为一个项目创建一个网站，并且我已经使用百分比来浮动我的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

Answer 1

你错过了一个DOCTYPE语句，因此IE处于怪癖模式

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

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

<!DOCTYPE html>

Answer 2

我在IE8中打开了你的页面，发现它是在Quirks模式下渲染的。当切换到标准模式时，所有填充都很好，看起来和我在Firefox中一样。

当您没有合适的Doctype时，将激活Quirks模式。加一个，你应该没问题。

Answer 3

你不会添加doctype ... IE默认情况下不支持几个css属性...所以我们必须使用doctype明确地让它接受..

所以使用，

＆LT; ！DOCTYPE html PUBLIC＆＃34; - // W3C // DTD XHTML 1.0 Transitional // EN＆＃34; ＆＃34; HTTP：//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＆GT;

它会工作......

IE CSS百分比

3 个答案: