Question

我在StackOverflow上搜索了这个，但似乎没有什么与这个问题完全相同。在我的网站上，页面底部有一些意想不到的“填充”。此填充根据您使用的浏览器而有所不同。很难展示出一个不错的比较，但这仍然是一个形象：

Browser comparison of footer

以下是代码：

body{
	background-color:blue;
}
#main::before{
	width:900px;
	height:113px;
	content: " ";
	position:absolute;
	top:-113px;
	left:0px;
	background-image: url('http://i.stack.imgur.com/7DE7i.png');
	background-repeat: no-repeat;
}
#main{
	position: absolute;
	top: 50%;
	left: 50%;
	width:900px;
	margin-top:100px;
	margin-bottom:150px;
	background-image: url('http://i.stack.imgur.com/zZCB2.png'); 
	background-repeat: repeat-y;
	height:80%;
	margin-right: -50%;
	text-align:center;
	transform: translate(-50%, -50%);
}
#main::after{
	width:900px;
	height:100px;
	content: " ";
	position:absolute;
	bottom:-100px;
	left:0px;
	background-image: url('http://i.stack.imgur.com/DVJAq.png');
	background-repeat: no-repeat;
}

<body>
  <div id="main"></div>
</body>

我猜测它与边距/填充/定位有关，但正如你所知，这几乎就是整个代码。造成这种情况的原因是什么，以及如何解决？或者有没有其他方法来格式化我的图像并获得相同的结果而没有问题？

Answer 1

我很确定你的罪魁祸首是这种风格：transform: translate(-50%, -50%);

将此样式更改为：transform: translateX(-50%);，然后将top定义更改为top:113px;以匹配您的::before高度。

#main{
    position: absolute;
    top: 113px; /*matching ::before height*/
    left: 50%;
    width:900px;
    margin-top:100px;
    /*margin-bottom:150px;*/
    background-image: url('http://www.thefunnyzone.co.uk/images/body.png');
    background-repeat: repeat-y;
    height:80%;
    margin-right: -50%;
    text-align:center;
    transform: translateX(-50%);
}

请参阅此fiddle。

关于translate属性 - 元素占用的原始空间将保持不变，就好像元素没有移动一样

Answer 2

在我看来，这是#main css规则中的保证金属性：

margin-top:100px;
margin-bottom:150px;

删除这些行，你的填充应该消失了。

此处示例： https://jsfiddle.net/6y8eok9f/

页面底部有“填充”的异常跨浏览器错误

2 个答案: