在所有瀏覽器中設置包裝高度相等

我有一個包裝，我需要在所有瀏覽器中將其高度設置爲相等。在所有瀏覽器中設置包裝高度相等

我該怎麼做？其實我已經嘗試了使用最小高度和高度：100％，但它不工作。

這是它是如何顯示在不同的瀏覽器：

enter image description here 這裏是我的CSS：

body 
{ 
    background: #99CCFF; 
    margin: 20px 0; 
    padding: 0; 
    width: 100%; 
} 

    #wrapper 
{ 
    position: relative; 
    margin:-20px auto; 
    width:auto; 
    height:450px; 
    background-image: url('../images/bg.jpg'); 
    background-repeat: repeat; 
}

來源

2012-01-03 coder

這實際上是CSS導致您的屏幕截圖的佈局？ '高度：450px'應該在所有瀏覽器中都相當一致... – ptriek 2012-01-03 22:07:38

@ Ptriek-I同意你的觀點，但是如何擺脫這個問題？正如Daff提到的那樣，設置html高度也不太合適。 – coder 2012-01-03 22:09:24

如果我在[jsfiddle]（http://jsfiddle.net/ptriek/bD8PW/）中的所有瀏覽器始終在450像素的高度渲染代碼，則代碼中必須有其他內容導致此問題... – ptriek 2012-01-03 22:12:46

@Kiran

你應該讓你擺脫負面保證金，首先。如果您發現某個瀏覽器存在佈局問題，稍後可以使用頭中的conditional css語句和單獨的css文件處理該問題。

但要回答你的主要問題。確保你總是使用margin：0;和填充：0;在做初始佈局時。這將在一開始就帶走很多佈局錯誤。某些版本的IE不符合Web標準，所以除了解決方法之外，有時您可以做的不多。（即有條件的CSS）

看看這個樣本頁面爲您創建。我拿走你的位置：相對，並添加了浮動和顯示屬性，以及更改您的利潤率和填充爲零和身體和#wrapper。我還將包裝的寬度從auto更改爲100％。

http://www.albatrossfonts.com/heightcss/wrapperHeight.html

我用白色作爲背景色爲包裝爲好，因爲我沒有訪問您的圖像。

下面的代碼：

body 
{ 
    background: #99CCFF; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
} 

#wrapper 
{ 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 450px; 
    display: block; 
    float: left; 
    background-image: url('../images/bg.jpg'); 
    background-repeat: repeat; 
    background-color: #ffffff; 
}

來源

2012-01-03 22:44:52 jhilgert00

@ jhilgert00-感謝您的信息。我真的很感激你，你已經解決了我的問題。 – coder 2012-01-03 23:01:28

使用CSS重置http://meyerweb.com/eric/tools/css/reset/每個瀏覽器將填充物，保證金及其他屬性不同。

/* http://meyerweb.com/eric/tools/css/reset/ 
     v2.0 | 20110126 
     License: none (public domain) 
    */ 

    html, body, div, span, applet, object, iframe, 
    h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
    a, abbr, acronym, address, big, cite, code, 
    del, dfn, em, img, ins, kbd, q, s, samp, 
    small, strike, strong, sub, sup, tt, var, 
    b, u, i, center, 
    dl, dt, dd, ol, ul, li, 
    fieldset, form, label, legend, 
    table, caption, tbody, tfoot, thead, tr, th, td, 
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary, 
    time, mark, audio, video { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     font-size: 100%; 
     font: inherit; 
     vertical-align: baseline; 
    } 
    /* HTML5 display-role reset for older browsers */ 
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section { 
     display: block; 
    } 
    body { 
     line-height: 1; 
    } 
    ol, ul { 
     list-style: none; 
    } 
    blockquote, q { 
     quotes: none; 
    } 
    blockquote:before, blockquote:after, 
    q:before, q:after { 
     content: ''; 
     content: none; 
    } 
    table { 
     border-collapse: collapse; 
     border-spacing: 0; 
    }

來源

2012-01-03 23:23:32

在所有瀏覽器中設置包裝高度相等

回答

相關問題