2012-04-30 84 views
1

我有一個asp.net-mvc3網站。 我創建了所有使用CSS的佈局。佈局正是我想要的Firefox和Chrome瀏覽器,但在互聯網瀏覽器,它是在一個大混亂。爲特定瀏覽器創建佈局

所以現在我正在嘗試修復它。

但問題是我想修復它,而不會在Firefox或Chrome上搞亂它。

我是否必須從頭開始重新構建佈局?或者有沒有辦法爲特定的瀏覽器指定特定的佈局。

事情是這樣的:

如果Internet Explorer然後使用這個CSS表或樣式,否則使用我媒體鏈接有。

回答

6

使用這些(把它的頭):

目標IE

<!--[if IE]> 
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> 
<![endif]--> 

目標一切,除了IE

<!--[if !IE]><!--> 
    <link rel="stylesheet" type="text/css" href="not-ie.css" /> 
<!--<![endif]--> 

目標IE 7 ONLY

<!--[if IE 7]> 
    <link rel="stylesheet" type="text/css" href="ie7.css"> 
<![endif]--> 
的所有版本僅針對IE 6
<!--[if IE 6]> 
    <link rel="stylesheet" type="text/css" href="ie6.css" /> 
<![endif]--> 

目標IE 5 ONLY

<!--[if IE 5]> 
    <link rel="stylesheet" type="text/css" href="ie5.css" /> 
<![endif]--> 

目標IE 5。5 ONLY

<!--[if IE 5.5000]> 
<link rel="stylesheet" type="text/css" href="ie55.css" /> 
<![endif]--> 

目標IE 6和LOWER

<!--[if lt IE 7]> 
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" /> 
<![endif]--> 

<!--[if lte IE 6]> 
    <link rel="stylesheet" type="text/css" href="ie6-and-down.css" /> 
<![endif]--> 

目標IE 7和LOWER

<!--[if lt IE 8]> 
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> 
<![endif]--> 

<!--[if lte IE 7]> 
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> 
<![endif]--> 

目標IE 8和LOWER

<!--[if lt IE 9]> 
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" /> 
<![endif]--> 

<!--[if lte IE 8]> 
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" /> 
<![endif]--> 

目標IE 6和更高的

<!--[if gt IE 5.5]> 
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" /> 
<![endif]--> 

<!--[if gte IE 6]> 
    <link rel="stylesheet" type="text/css" href="ie6-and-up.css" /> 
<![endif]--> 

目標IE 7和更高

<!--[if gt IE 6]> 
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" /> 
<![endif]--> 

<!--[if gte IE 7]> 
    <link rel="stylesheet" type="text/css" href="ie7-and-up.css" /> 
<![endif]--> 

目標IE 8或更高

<!--[if gt IE 7]> 
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" /> 
<![endif]--> 

<!--[if gte IE 8]> 
    <link rel="stylesheet" type="text/css" href="ie8-and-up.css" /> 
<![endif]--> 
+1

這讓垃圾:)使用http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/代替 - 那麼你只需要一個CSS文件。 –

+0

第一個是針對所有IE的-_- –

+0

Paul的做法在實踐中要好得多。您可以隨時爲所有IE添加一個。在實踐中,你只會需要一個ie6,7和8 - 其他人都很好。另外,IE10不再對ccs做出響應。 –

1

您需要有條件的IE樣式表。

創建您希望只有IE使用的樣式表,並將它們放入IE特定代碼內的文檔頭中。例如:

<!--[if IE]> 
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> 
<![endif]--> 

這將調用IE瀏覽器的任何版本的所有IE-only.css樣式表,但你可以改變的代碼是特定版本,甚至一組版本,例如「比IE9少」

這是具有所有信息的重要資源 - http://css-tricks.com/how-to-create-an-ie-only-stylesheet/Dan已複製和粘貼在這個答案詳細內容你)

0

什麼你問的是一個<!--[if IE]>標籤。這website詳細通過它。

但是,將來您可以構建一個站點以跨平臺工作而無需使用IE標記。這一切都取決於你的CSS和標記。

1

你必須找出問題(S)(其中可能有一些做使用怪癖模式)並解決它們。

沒有一個可以解決所有IE問題的靈丹妙藥,而提供完全不同的樣式表通常需要做更多的工作。

您可以使用conditional comments專門爲IE提供代碼,但在絕大多數情況下,這應該通過輕觸來應用。

1

我已經設法通過使用完整的reset.css樣式表,在IE,Safari,Opera和Firefox上獲得非常一致的設計。

reset.css將爲每個瀏覽器「清零」不同的預設標準,然後將您的實際樣式表加載到乾淨的平板上。

只有在測試reset.css和stylesheet-name.css之後,才能創建瀏覽器特定的黑客程序。這是跨多個瀏覽器進行一致顯示的最佳實踐。

下面的鏈接是一個很好的例子:http://meyerweb.com/eric/tools/css/reset/