Question

我有一个简单的页面：5行（4行明确定义高度[header，bredcrumb，trademark，footer]，1行设置为100％[content]），这些都显示在网页上。

然而，我的CSS在Firefox，Chrome，Internet Explorer和Safari中完美呈现。 Opera讨厌我并添加一个滚动条。

如何构建CSS以便适合所有5个浏览器，而无需向任何浏览器添加滚动条？

HTML：

<html>
<head>
</head>
<body>
<div class='header'>
</div>
<div class='breadcrumb'>
</div>
<div class='content'>
<div class='panels'>
<div class='panel-a'>
</div>
<div class='panel-b'>
</div>
<div class='panel-c'>
</div>
</div>
</div>
<div class='trademark'>
</div>
<div class='footer'>
</div>
</body>
</html>

CSS：

div.header,
div.breadcrumb,
div.content,
div.trademark,
div.footer {
display: table-row;
width: 100.00%;
}

div.header {                
height: 2em;
}

div.breadcrumb {            
height: 1.5em;
}

div.content {
height: 100%;
}

div.panels {
display: table-cell;
height: 100%;
width: 100%;
}

div.panel-table {
display: table;
height: 100%;
width: 100%;
}

div.panel-a,
div.panel-b,
div.panel-c {
display: table-cell;
}

div.trademark {
height: 1.25em;
}

div.footer {                
height: 2em;
}

Answer 1

由于没有歌剧，我无法测试它，但我的猜测是你需要从身体中移除填充和边距

html, body{
 padding: 0;
 margin: 0;
}

Opera浏览器的CSS问题

1 个答案: