對齊在IE10中被破壞

我有css代碼，帶有頁眉和頁腳。當我打開IE10對齊適合註銷時，在左側欄中註釋，但是當我在IE9中打開它時，我在IE9,8,7,6對齊註釋來自頁面中心，當我修復IE9,8中註銷對齊時，7,6它在IE10中被破壞。如何解決此問題在兩個IE10和IE9,8,7,6對齊在IE10中被破壞

其位置左側欄，以便signout住宿

你可以在http://jsfiddle.net/hadinetcat/E8jd3/5/

CSS

.container3 { 
float:left; 
width:100%; 
/*background:green;*/ 
overflow:hidden; 
position:relative; 
} 

.container2 { 
float:left; 
width:100%; 
background:FFA500; 
position:relative; 
right:45%; 
} 

.container1 { 
float:left; 
width:100%; 
/*background:red;*/ 
position:relative; 
right:40%; 
} 

.col1 { 
float:left; 
width:26%; 
position:relative; 
left:87%; 
overflow:hidden; 
height:570px; 
} 

.col2 { 
float:left; 
width:50%; 
position:relative; 
left:90%; 
overflow:hidden; 
} 

.col3 { 
float:left; 
width:26%; 
position:relative; 
left:80%; 
overflow:hidden; 
} 


.footer { 
     border:1px solid orange; 
     position: relative; 
     padding:0px; 
     margin-top:-5px; 
    font-size:15px; 
    bottom:36px; 

    } 


.signout { 
position:  relative; 
width:   200; 
bottom:   150px; 
left:   20px; 
}

看到我的網站

HTML

<div id="header" style="background-color:#FFA500;"> 

<h1 style="margin-bottom:0;">Wellcome To Balhalfe Services Customer Reports</h1> 

<div class="container3 "> 
<div class="container1 "> 
<div class="container2 "> 


<div class="col1"> 

lalalallalalalallala <br /> 
lllllllllllllllllllll <br /> 

</div> 


<div class="col2"> 

<div align="center"> 
     <H2 align="center"> Report Table</H></div> 

<table border="1" align="center"> 
     <tr> 
       <td><b>Name</b></td> 
       <td><b>Mime</b></td> 
       <td><b>Size (bytes)</b></td> 
       <td><b>Created</b></td> 
       <td><b>Download</b></td> 
      </tr> 




      <tr> 
       <td>1594(HA 10 AL HAALY).pdf</td> 
       <td>application/pdf</td> 
       <td>60964</td> 
       <td>2013-08-29 23:40:07</td> 
       <td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td> 
      </tr> 

<tr> 
       <td>eu contres.txt</td> 
       <td>text/plain</td> 
       <td>546</td> 
       <td>2013-08-22 00:06:55</td> 
       <td><a style='text-decoration:none;'href=' get_file_work.php?id=4&company=companya'>Download</a></td> 
      </tr></table> 

</div> 


<div class="col3"> 

</div> 

</div> 

</div> 


<div class="signout"> 

<a style='text-decoration:none;' href= "index.html">Sign Out </br></a> 

</div> 


<div class="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 
Copyright © balhalfe services 20103-2014</div> 

</div>

來源

2013-10-03 hadi

.signout應該是position:absolute; clear:left;而不是position:relative;。 position:absolute;爲relative至最後的父母position:relative;。

以下信息仍將有助於在未來：

由於IE 10不接受IE特定的HTML控制CSS。我使用下面的代碼：

var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]); 
function gteIE(version, className){ 
    if(IE >= version){ 
    bod.className = className; 
    } 
} 
gteIE(10, 'ie10');

現在，只要確保你在你的CSS指定.ie10。

來源

2013-10-03 21:40:09 PHPglue

你可以請我解釋一步一步在哪裏殼我添加這？ – hadi

我必須爲此使用jquery嗎？ – hadi

您將其添加到外部JavaScript頁面。調用它'common.js'，然後使用'script'標記，比如''。然後在你的CSS樣式表中，你只需要做一些'.ie10 .otherclass {/ * CSS here * /}'。因此，CSS公式簡單地是'.ie10'，然後是其後的任何其他選擇器。 JavaScript只是改變了'body'元素的className，所以所有的'body'子孫都可以用空間訪問，然後使用更多的CSS。 – PHPglue

添加clear: both;到您的.signout清除所有浮動列。

來源

2013-10-03 21:39:47

不行，我試過了。 – hadi

它與明確的工作：兩者;在IE6上謝謝。 – hadi

對齊在IE10中被破壞

回答

相關問題