1

私はプロジェクトのWebサイトを作成しており、パーセンテージを使用してdivをフロートさせ、複数の解像度/ブラウザー間での相互互換性を確保しています。Firefox、Safariなどでは問題なく動作するようですが、主な問題はIE9にあります。アイテムは左上隅に配置されたままになっているようです。何か案は？

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を使用してください。HTML5Doctypeでも問題なく機能します。

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

IE8でページを開いたところ、Quirksモードでレンダリングされていることがわかりました。標準モードに切り替えると、すべてのパディングが正常に機能し、Firefoxの場合とまったく同じように見えます。

適切なDoctypeがない場合、Quirksモードがアクティブになります。1つ追加すれば、大丈夫です。

于 2012-04-24T03:40:34.817 に答える
0

doctypeを追加しなかったでしょう...IEはデフォルトでいくつかのcssプロパティをサポートしていません...したがって、明示的に受け入れるにはdoctypeを使用する必要があります。

だから、使用してください

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

それはうまくいくでしょう...

于 2012-04-24T03:44:11.287 に答える