IE6/7列布局CSS問題

我想在我的ASP.NET MVC4佈局模板的標題部分構建一個包含3列（固定 - 液體 - 液體）的標題，我無法完全理解IE6 +的工作原理，鉻，FF等IE6/7列布局CSS問題

具體來說，我需要它看起來像

|--------------------------------------| 
| wrapper        | 
| |---------| |----------| |---------| | 
| | left | | title | | right | | 
| |---------| |----------| |---------| | 
|--------------------------------------|

漁獲（除了有支持IE6和IE7）是，我需要一些包裝當窗口得到小於發生500像素;看起來像。這種包裝只需要支持媒體查詢的瀏覽器才能發生。（因此對於IE < 9，在調整縮小尺寸時可以壓縮上面示例中的「標題」）。

|--------------------------------------| 
| header-wrapper      | 
| |---------|    |---------| | 
| | left |    | right | | 
| |---------|    |---------| | 
|          | 
| |----------------------------------| | 
| |    title    | | 
| |----------------------------------| | 
|--------------------------------------|

這裏是CSS我已經走到這一步，

.content-wrapper { 
    margin: 0 auto; 
    max-width: 1140px; 
} 
.header-wrapper { 
    text-align: center; 
    vertical-align: text-bottom; 
} 
.header-left-box { 
    float: left; 
    width: 160px; 
} 
.header-right-box { 
    float: right; 
    margin:auto;  
} 
.header-center-box { 
    min-width: 200px; 
    background:none; 
    margin:auto; 
    width:50%; 
    padding: 4px; 
} 
.site-logo 
{ 
    background-image:url('/Content/images/logo.png'); 
    background-repeat: no-repeat; 
    background-position: top left;  
    display:block;   
    width:130px; 
    height:80px;  
    margin-bottom: 5px; 
}

這裏是MVC4模板的相關部分

<header> 
    <div class="content-wrapper header-wrapper"> 
     <div class="header-left-box"> 
      <div class="site-logo"></div>  
     </div> 
     <div class="header-right-box"> 
      <nav> 
       <ul id="menu"><li>Quit</li></ul> 
      </nav>    
     </div>       
     <div class="header-center-box"> 
      <p>title</p> 
     </div> 
    </div> 
</header>

我寧願一個利用CSS的解決方案和HTML。

來源

2013-03-26 Jason

直到V9，IE不支持媒體查詢。我懷疑只有CSS的方法會起作用。 – 2013-03-26 20:52:39

感謝Diodeus，我編輯了這個問題以考慮到這一點。 – Jason 2013-03-27 12:41:46

問題中提供的代碼適用於我需要的一切，IE6和IE7除外。

我決定將以下內容添加到我的佈局中以替換原始的身體標記。

<!--[if IE 6]> <body class="ie6"> <![endif]--> 
<!--[if IE 7]> <body class="ie7"> <![endif]--> 
<!--[if gt IE 7]><!--> <body> <!--<![endif]-->

有了這個，我可以使用以下樣式作爲問題中已定義樣式的補充。

.ie6 .header-wrapper, 
.ie7 .header-wrapper { 
    text-align: center; 
    vertical-align: text-bottom;   
    height: 85px; 
} 

.ie6 .header-left-box, 
.ie7 .header-left-box {  
    float: left; 
    width: 25%; 
    height: 82px; 
} 

.ie6 .header-right-box, 
.ie7 .header-right-box { 
    float: right; 
    width: 25%; 
    height: 82px; 
    text-align: right;  
} 

.ie6 .header-center-box, 
.ie7 .header-center-box {  
    padding: 4px;  
    margin-left: 26.2%; 
    margin-right: 26.2%; 
    width: 40%; 
}

這個處理一切我需要的塔中，爲所有的瀏覽器做的，包括在IE6和IE7列包裝。

來源

2013-03-27 15:58:48 Jason

對於Jason的回答，除了瀏覽器特定的編碼或樣式表之外，您還可以將JavaScript用於除IE以外的瀏覽器。

if (navigator.userAgent.toLowerCase().indexOf('chrome') != -1) { 
    document.write('<link rel="stylesheet" type="text/css" href="style-ch.css" media="all" />'); 
}

就像，這將運行一些代碼（在上述例子中，加載特定的鉻樣式表）僅當所用瀏覽器是指定的一個。

當然，你也可以指定版本的瀏覽器，像這樣： .indexOf('chrome 11')

確保此代碼後聲明聲明常規/交叉布勞爾樣式表（S），或可能無法正常工作。

我看不出爲什麼你會爲IE6和IE7優化而煩惱，因爲這些都是真的老了。但這是你的個人選擇當然:)

來源

2013-03-27 18:51:43 poepje

謝謝poepje。我的主要解決方案適用於所有現代（和移動）瀏覽器，因此我不需要專門針對Chrome等。對我的情況不幸的是，目標Intranet有很多IE6和IE7機器。 – Jason 2013-03-27 19:01:23

似乎這家公司需要一些更新：p – poepje 2013-03-27 19:02:54

沒有意識到你是問題提問者以及回答者，btw哈哈 – poepje 2013-03-27 19:05:05

IE6/7列布局CSS問題

回答

相關問題