IE瀏覽器有不同的高度/寬度爲div比火狐

我在div在IE中的高度和寬度有問題。IE瀏覽器有不同的高度/寬度爲div比火狐

在我的網頁http://www.ricominciodame.it/eventi.php，有一些div s與黑板風格。
在Firefox中，它們都可以正常工作，但在IE（7和8）中，寬度更低，背景被切斷。

以下是我的CSS：

div.evento { 
    background : white url("images/sfondo_evento.png") top no-repeat; 
    width : 260px; 
    height : 207px; 
    margin:5px; 
    margin-left:0px; 
    margin-bottom : 20px; 
    padding-left : 20px; 
    padding-right : 20px; 
    padding-top : 20px; 
    padding-bottom : 20px; 
    color : white; 
}

我怎樣才能解決這個問題呢？

來源

2011-01-25 pAkY88

你的網頁在IE quirks mode運行由DOCTYPE引起。您必須使用這些中的任何一個http://www.w3.org/QA/2002/04/valid-dtd-list.html

此外，最好始終驗證您的網站，從w3 validator。

來源

2011-01-25 18:01:44 Sotiris

您的doctype是否將瀏覽器設置爲標準模式？例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

來源

2011-01-25 17:58:43 Keltex

聽起來是這樣的問題。 – TAG 2011-01-25 18:43:03

在設計新頁面之前，我總是'重置'css。我打開我的CSS文件（注意，我第一次加載復位，之後實際佈局）：

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

我重置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 */

來源

2011-01-25 17:58:43 SuperSpy

該css代碼只是所有代碼的一個片段，在該片段之前有一個像這樣的小復位規則： html，body，* { margin：0; 填充：0; } – pAkY88 2011-01-25 18:04:11

這解決了我在瀏覽器之間的問題。Chrome和Firefox在桌面上的高度相同，IE比較小。我只拿到了頂部的「清除所有樣式」並刪除了vertical-align：baseline，因爲這弄亂了我的表格。現在IE，Chrome和Firefox都有相同的高度。在閱讀一段時間後，這是因爲如果沒有表示樣式，瀏覽器會擁有自己的默認樣式。這是一個偉大的發現，謝謝.. – Switch 2015-09-30 15:06:29

可能是一個盒子模型的問題：http://css-tricks.com/the-css-box-model/

我會做這樣的事情：

div.evento { 
    background : white url("images/sfondo_evento.png") top no-repeat; 
    width : 300px; 
    height : 207px; 
    margin:5px; 
    margin-left:0px; 
    margin-bottom : 20px; 
    color : white; 
} 
div.evento-inner { 
    padding-left : 20px; 
    padding-right : 20px; 
    padding-top : 20px; 
    padding-bottom : 20px; 
}

在IE

，填充被佔用20像素的260px寬您聲明的每個邊。

來源

2011-01-25 18:04:43 vinhboy

IE瀏覽器有不同的高度/寬度爲div比火狐

回答

相關問題