CSS地方3個div的，它們之間利潤率IE 7及以上

我試圖創建一個panel.The panelHeader，panelMiddle和panelFooter都有1px的高度底色，並在panelMiddle背景圖像圖像在y中重複。在chrome和mozilla中，div的平滑定位其中一個在另一個的底部沒有邊距。但在IE（真是一個驚喜！）標題和中間之間的邊距出現。任何指引感謝CSS地方3個div的，它們之間利潤率IE 7及以上

<div class="panelContainer"> 
     <div class="panelHeader"></div> 
     <div class="panelMiddle"> 
      test<br/> 
      test<br/> 
      test<br/> 
     </div> 
     <div class="panelFooter"></div> 
    </div>

編輯：CSS代碼

.panelContainer{ 
    width: 300px; 
} 

.panelHeader{ 
    background-image:url(panelHeader.png); 

    background-repeat: no-repeat; 
    width: 300px; 
    height: 1px;  
} 

.panelMiddle{ 
    background-image:url(panelMiddle.png); 

    background-repeat: repeat-y; 
    width: 300px; 
} 

.panelFooter{ 
    background-image:url(panelFooter.png); 

    background-repeat: no-repeat; 
    width: 300px; 
    height: 5px; 
}

來源

2011-01-20 Argiropoulos Stavros

我們可以看到你的CSS嗎？ – Kyle 2011-01-20 12:34:02

請提供您的CSS。 – thirtydot 2011-01-20 12:34:28

您的網頁是否有文檔類型？ – thirtydot 2011-01-20 12:42:58

您的網頁（顯然）以怪癖模式運行。

通過我的評論"Does your page have a doctype?"（以及我無法在不是Quirks模式的頁面上重現您的問題的事實）的幫助下，您意識到了這一事實，然後您就可以解決問題。

這個答案很愚蠢。

來源

2011-01-24 15:19:49 thirtydot

我會修改你的CSS來此（注意花車和利潤）：

.panelHeader{ 
    background-image:url(panelHeader.png); 
    background-repeat: no-repeat; 
    width: 300px; 
    height: 1px; 
    float: left; 
    margin: 0; 
} 

.panelMiddle{ 
    background-image:url(panelMiddle.png); 

    background-repeat: repeat-y; 
    width: 300px; 
    float: left; 
    margin: 0; 
} 

.panelFooter{ 
    background-image:url(panelFooter.png); 
    background-repeat: no-repeat; 
    width: 300px; 
    height: 5px; 
    float: left; 
    margin: 0; 
}

IE有一些關於保證金和填充的非常奇怪的行爲，甚至在不同版本之間也會有所不同。我通常假設我需要爲每個元素指定邊距和填充規則，除非我先設置了非常一般的重置規則。

來源

2011-01-20 17:41:04

對於正確的CSS腳本我總是重置整個CSS代碼。我重置它的瀏覽器將具有相同的邊距和填充。某些瀏覽器（如IE）會自動添加廣告邊距，如果它們未手動添加到您的css腳本中。

這裏是我的reset.css：

/* CSS Document */ 

/* Clear all styles */ 
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, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
dl, dt, dd, ol, ul, li, 
fieldset, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-weight: inherit; 
    font-style: inherit; 
    font-size: 100%; 
    font-family: inherit; 
    vertical-align: baseline;} 

/* remember to define focus styles! */ 
:focus { 
    outline: 0;} 

body { 
    line-height: 1; 
    color: black; 
    background: white;} 

ol, ul { 
    list-style: none;} 

/* tables still need 'cellspacing="0"' in the markup */ 
table{ 
    border-collapse: separate; 
    border-spacing: 0;} 

caption, th, td { 
    text-align: left; 
    font-weight: normal;} 

blockquote:before, blockquote:after, 
q:before, q:after { 
    content: "";} 

blockquote, q { 
    quotes: "" "";} 
/*Ceal all styles END */

然後在文件中你把這個元的頭：

<link rel="stylesheet" href="css-styles/reset.css" /> 
<link rel="stylesheet" href="css-styles/all.css" />

請注意重置CSS高於真正的樣式表。隨時糾正我可怕的英語......

來源

2011-01-24 15:36:54 SuperSpy

CSS地方3個div的，它們之間利潤率IE 7及以上

回答

相關問題