2013-07-18 47 views
0

我有我的保證金:0自動在Chrome中看起來不錯,但它不在IE9中工作。在IE9中,整個網站在屏幕左側是靜態的。我根據一些建議添加了一個簡單的重置CSS語句,但他們沒有幫助。margin:0 auto;在IE9與支架1

在main.css的:

html, body { 
     padding:0; 
     margin: 0; 
} 

body { 
    background-color: gray; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    font-size: 12px;   
} 

.wrapper { 
    width: 1009px; 
    background-color:white; 
    border-style:solid; 
    border-color:#002663; 
    padding:5px; 
    margin: 0 auto; 
    margin-top:25px; 
} 

更新:CSS的看起來像在IE的開發工具面板什麼:

enter image description here

任何人都可以看到我可以使IE瀏覽器的改進?謝謝。

更新:實際的要求HTML:

<html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<head> 
    <title>Search Page</title> 
    <!-- Hostname: VDDP03A-FAEF32A --> 
    <link rel="stylesheet" href="/CSA/styles/main.css" type="text/css" /> 
    <link rel="stylesheet" href="/CSA/styles/smoothness/jquery-ui-1.8.10.custom.css" type="text/css" /> 
    <script type="text/javascript" src="/CSA/scripts/jquery-1.10.2.min.js" ></script> 
    <script type="text/javascript" src="/CSA/scripts/jquery-ui-1.10.3.js" ></script> 
    <script type="text/javascript" src="/CSA/scripts/jquery.validate.js" ></script> 

</head> 
<body > 
<div class="wrapper"> 
    <table width="100%" border="0" cellpadding="0" style="margin:0;"> 
    <tr> 
    <td> 
    <img src="/CSA/images/logo.jpg" width="300" align="top-left" border="0" style="margin:0;" alt="myLogo"> 
    </td> 
    <td width="50%"> 
    <br /> 
    <h2 style="font-weight:normal;align:right;color:#002663;margin:0;">Title</h2> 
    </td> 
    <td> 
    </td> 
    </tr> 
    </table> 
    <hr color="#002663" style="margin:0;"> 


<form name="form1" method="post" action="/CSA/web/CSA.do" style="margin:0;"> 
    <input type="hidden" name="searchType" value="myValue"> 
    <table width="1000px" border="0" cellpadding="0" style="margin:0;"> 
     <col width="285px" /> 
     <col width="300px" /> 
     <col width="278px" /> 
     <col width="137px" /> 

     <tr style="margin:0;"> 
      <td colspan="4"> 
       <h4 style="color:#002663;margin-bottom:10;margin-top:3;">Search 1:</h4> 
     </tr> 
     <tr style="margin:0;"> 
      <td style=" padding-left:100px; padding-bottom:0px; width:185px;" > 
      options : 
      <input type="radio" name="options" value="OP1" style="border:none;"> 
      OP1 
      <input type="radio" name="options" value="OP2" style="border:none;"> 
      OP2 

      </td> 
      <td> 
       Search Criteria&nbsp;:&nbsp;<input type="text" name="criteria" maxlength="20" size="20" tabindex="1" value="" id="searchField1"> 
      </td> 
      <td style="min-width: 268px;"> 
       Date&nbsp;:&nbsp; 
       <input type="text" name="lossDate" maxlength="10" size="11" value="07/19/2013" id="datepicker"> 


      </td> 
      <td style="min-width: 138px;"> 
       <input type="submit" name="submit" tabindex="3" value="Search" id="submit" style="margin-top:5;">&nbsp;&nbsp;&nbsp; 
       <input type="reset" name="reset" tabindex="4" value="Reset" id="reset" style="margin-top:5;"> 
      </td> 
     </tr> 
    </table> 
</form> 

<!-- Three more forms similar to the above --> 

<hr color="#b0b1b2" style="margin:3;"> 

<table table width="1000px" border="0" cellpadding="0"> 
     <tr style="margin:0;"> 
      <td style="margin:0;"> 
       <h4 style="color:#002663" style="margin-bottom:8;margin-top:3;">Search Results:</h4> 
      </td> 
     </tr> 



    <div styleId="errors" style="margin:0;"> 

    </div> 
</table> 
</div> 
</body> 
</html> 
+0

你是否以CSS重置開始? –

+2

P.S. - 這在客戶端是100%,與Java或Struts無關。 –

+0

ie9可能在body標籤上有默認填充或邊距,請嘗試將body的填充/邊距設置爲0 – Huangism

回答

4
<html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

文檔類型必須是的第一件事文檔中加入margin:0 auto。它在<html>開始標記之前去

把它放在你擁有它的地方都是無效的,並且會觸發怪癖模式(並且在怪癖模式下,各種各樣的事情都會中斷)。

+0

哇,這很簡單。謝謝@Quentin。 –

0

嘗試

body, html { 
    padding: 0; 
    margin: 0; 
} 

查一查復位CSS當你得到一個機會http://www.cssreset.com/

更新:

我會建議你採取寬度關閉身體標籤並將其放入div中。

http://jsfiddle.net/KMDuw/2/

我的小提琴顯示了使用自動緣固定寬度股利。如果你脫掉身體的CSS,你會看到一些空間。

你能不能也發表您的HTML請

+0

不幸的是,沒有工作。我不確定我是否做得對。請參閱我的編輯。 –

+0

我試着根據您的建議進行更改。在所有瀏覽器中仍然看起來不錯,但IE。 –

+0

可能是我現在測試的表格,它對我來說很好。我注意到你的包裝上有填充物,所以會在包裝和表格之間創建一個小間距。您應該能夠通過IE開發工具知道是什麼導致了這個空間。如果必須,請拍攝屏幕截圖。這不應該很難弄清楚。確保屏幕截圖捕獲整個IE瀏覽器 – Huangism

0

嘗試在你的身體標記

body { 
    /* background-position: 5px 5px; 
    background-repeat: no-repeat; */ 
    background-color: gray; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    width: 1010px; 
    margin: 0 auto; /* <--*/ 
} 
相關問題