網頁在Firefox中顯示的方式與我在Chrome和IE中獲得的所需設計不同

-1

我想要做的是創建一個div，然後在其中放置3個div來創建3個圓柱形網頁。網頁在Firefox中顯示的方式與我在Chrome和IE中獲得的所需設計不同

下面是一個只包含內容部分我的HTML：

#Content_Left { 
 
    height: auto; 
 
    padding-left: 10px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    width: 200px; 
 
    float: left; 
 
} 
 
#Content_Center { 
 
    height: auto; 
 
    padding-left: 10px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    width: 500px; 
 
    float: left; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
} 
 
#Content_Right { 
 
    height: auto; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    width: 200px; 
 
    float: right; 
 
}

<div id="Content"> 
 
    <div id="Content_Left"> 
 
    <h1>Header Here </h1> 
 
    <p>Text Goes Here!</p> 
 
    </div> 
 

 
    <div id="Content_Center"> 
 
    <h1>Header Here </h1> 
 
    <p>Text Goes Here!</p> 
 
    </div> 
 

 
    <div id="Content_Right"> 
 
    <h1>Header Here </h1> 
 
    <p>Text Goes Here!</p> 
 
    </div> 
 
</div>

現在的問題是，這段代碼在Chrome和IE，但顯示我想要的方式來不在Firefox中。我該如何擺脫這個問題？

來源

2016-03-08 Bitan Basak

「不是我想要的方式」不是一個很好的問題描述。關於它在FF中顯示的方式究竟有什麼錯誤？ –

您可以使用reset.css或normalize.css http://meyerweb.com/eric/tools/css/reset/ – AhbapAldirmaz

它可以在所有瀏覽器中共同工作。但我認爲你只是想要在stacksnippet中顯示，這是一個iframe太小了，你需要200 + 200 + 500像素寬 –

如果你想與3列的DIV，您可以使用Flexbox的：

.container { 
 
    display: flex; 
 
    width: 500px; 
 
    height: 200px; 
 
    background: whitesmoke; 
 
} 
 

 
.col { 
 
    flex-grow: 1; 
 
    background: white; 
 
    margin: 20px 
 
}

<div class="container"> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
</div>

或者您也可以使用float：左但你必須知道的寬度預先分區。

.container { 
 
    width: 500px; 
 
    height: 200px; 
 
    background: whitesmoke; 
 
} 
 

 
.col { 
 
    width: 25.0%; 
 
    height: 200px; 
 
    float: left; 
 
    background: white; 
 
    margin: 10px; 
 
}

<div class="container"> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
    <div class="col"></div> 
 
</div>

如果我是你，我會如果有可能使用Flexbox的。這對於這些事情是完美的。

來源

2016-03-08 15:04:05

你的問題太籠統了。我在所有瀏覽器中都運行了代碼片段，結果相同。

有在每個瀏覽器加載頁面之間的一些差異，因爲所有的人都用不同的繪圖核心（FF採用蛤蚧，Chrome已經Webkit的廣告IE也有自己的核心）

如果一般定義不工作，儘量瞄準CSS的確切瀏覽器

對於鉻，它是：

@media screen and (-webkit-min-device-pixel-ratio:0) { 
     /*trimm your global definition here for chrome only*/ 
     /*for example*/ 

       #Content_Right {padding-left: 30px;} 

     }

對於FF是：

@-moz-document url-prefix() { 
    /*trimm your global definition here for chrome only*/ 
    /*for example*/ 
     #Content_Right {padding-left: 40px;} 


    }

Theese two我用，它的效果很好。對於IE我從來沒有使用特定的CSS定位，但這個話題應該是好的。 Apply style ONLY on IE

來源

2016-03-08 14:59:23 Zorak

網頁在Firefox中顯示的方式與我在Chrome和IE中獲得的所需設計不同

回答

相關問題