页面底部出现异常的跨浏览器错误，带有“填充”
[英]Unusual cross-browser error with 'padding' at the bottom of the page
问题描述
我在StackOverflow上搜索了此内容，但似乎没有与该问题完全相同的内容。 在我的网站上，页面底部有一些意外的“填充”。 该填充根据您使用的浏览器而有所不同。 很难显示出像样的比较，但是这还是一张图片：
这是代码：
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>
我猜想这与边距/填充/位置有关，但是正如您所知道的，这几乎是整个代码的全部。 是什么原因造成的，如何解决？ 还是有其他方法可以格式化我的图像并获得相同的结果而不会出现问题？
2 个解决方案
解决方案1
1 已采纳 2015-05-21 16:47:47
我很确定您的罪魁祸首是这种风格： 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%);
}
看到这个小提琴 。
关于translate属性-元素所占据的原始空间将保持不变，就好像元素没有移动一样
解决方案2
0 2015-05-21 16:35:45
在我看来，这是#main css规则中的保证金属性：
margin-top:100px;
margin-bottom:150px;
删除这些行，您的填充应该消失了。
此处的示例： https : //jsfiddle.net/6y8eok9f/
跨浏览器填充/边距
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.