Opera浏览器的CSS问题答案

【问题标题】：CSS issue with Opera browserOpera浏览器的CSS问题
【发布时间】：2014-10-13 22:06:52
【问题描述】：

我有一个简单的页面：全部显示在网页上的 5 行（4 行明确定义高度 [页眉、bredcrumb、商标、页脚]，1 行设置为 100% [内容]）。

但是，我的 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;
}

【问题讨论】：

不需要为你的css文件中的每个div添加div.。一个类和一个ID就够了

标签： html css html-table opera

【解决方案1】：

由于没有歌剧，我无法对其进行测试，但我的猜测是您需要从正文中删除填充和边距

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

【讨论】：