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比火狐

回答

相关问题