Fum*_*les 8 html css rendering html-rendering
前言:我已经阅读了很多关于div周围的图像的文章,周围有一个奇怪的空间,等等.
示例#1:div的不需要的padding-bottom
示例#2:https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
示例#3:无法消除包含div的2个水平div之间的空间
他们的问题看似相似但与我的不一样.在此示例文档中,边框,填充,轮廓等设置为零..但Opera和Firefox都在div的顶部渲染一个备用像素.第三个可能在这个空间作弊,但没有人似乎回答为什么它在那里..
编辑:我读过很多文章,这些文章很接近回答这个问题,但它们与实际问题似乎有些不同.
我错过了什么？这是我的第一个问题,请耐心等待:)
<!doctype html>
<html>
<head>
<title>Anger</title>
<style>
*{
cursor: default;
margin: 0;
outline: 0;
border: none;
padding: 0;
text-decoration: none;
}
body{
background-color: #87cefa;
}
div{
background-color: #ffffff;
}
button{
border-radius: 9px;
padding: 1px 6px 2px 6px;
font: 14px monospace;
color: #ffffff;
background-color: #1e90ff;
}
</style>
<head>
<body>
<div>
<button>Sample Button</button>
</div>
</body>
<html>
是否有一些CSS3将使它全部工作？这是一个实验项目,欢迎使用最新的CSS3.
PS:我只关心Opera渲染,虽然Firefox会很好地支持相同的标准兼容代码..谢谢!
将div上的行高更改为零.
div{
background-color: #ffffff;
line-height:0;
}