2012-04-24 163 views
1

我正在为一个项目制作一个网站,并且我使用百分比在多个分辨率/浏览器中使我的div浮动以实现交叉兼容性。它似乎对Firefox,Safari等工作正常,但IE 9的主要问题来了。这些项目似乎留在左上角。有任何想法吗?IE CSS百分比

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

+1

什么版本的IE?另外,你的HTML是什么样的? – twaddington 2012-04-24 03:38:55

回答

0

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

当您没有正确的文档类型时,怪异模式会激活。加一个,你应该没问题。

0

你不会加入DOCTYPE ... IE浏览器默认不支持一些CSS属性......因此,我们必须使用DOCTYPE明确地让它接受..

因此,使用,

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

It ll work ...