作者:虚线老母阳 | 来源:互联网 | 2023-05-26 13:27
我遇到在Firefox奇怪的行为(V35 V39关于百分比填充V52).我无法在Chrome中重现此问题.
我有一个元素,顶部填充设置为百分比,如下所示:
p {
padding:10% 0 0;
margin:0 0 1em;
background-color:#CCC;
}
元素上的填充百分比相对于其父元素的宽度.因此,我希望元素顶部的填充将随着窗口宽度的增大而增大.这确实是我的简单
标签的结果.
但是,当该元素浮动或具有宽度时,在调整窗口大小时,百分比填充不会按预期运行.填充是在负载计算正确.但是,当窗口调整大小时,浮动或具有宽度的元素的总高度似乎保持不变.元素中的文字莫名其妙地放置在一个神秘高度的区域的底部.这种情况发生在这样的元素:
p {
padding:10% 0 0;
margin:0 0 1em;
background-color:#CCC;
float:left;
}
p {
padding:10% 0 0;
margin:0 0 1em;
background-color:#CCC;
width:150px;
}
这是一张图片来说明我所看到的.Firebug添加了颜色编码; 紫色是填充,黄色是边距,蓝色是元素的内容.
是什么导致这种不一致?其他人可以在Firefox(或任何其他浏览器)中重现此问题吗?
这是一个小提琴演示.在Firefox中,尝试展开或收缩结果窗格以查看元素调整大小.
我没有添加一个可运行的代码片段,因为我找不到一种简单的方法来动态调整片段区域的大小.
我添加了一个堆栈代码来演示这个问题.使用"整页"按钮,以便拉伸窗口的宽度.
html,body {
margin: 0;
}
div#container {
width: 100%;
}
p {
padding: 10% 0 0;
margin: 0 0 1em;
background-color: #CCC;
}
p.width_limited {
width: 150px;
}
p.floated {
float: left;
}
1> Aakash..:
真奇怪.我不确定它是不是一个bug.但是,通过将显示更改为flex似乎可以解决问题.http://jsfiddle.net/vsvp71rw/4/
p {
display: -webkit-flex;
display: -moz-flex;
display: flex;
padding:10% 0 0;
margin:0 0 1em;
background-color:#CCC;
}
2> G-Cyr..:
您可以使用伪元素来避免错误,并清除您希望的10%宽度的高度.
html,
body {
margin: 0;
}
div#container {
width: 100%;
}
p {
margin: 0 0 1em;
background-color: #CCC;
}
p:before {
content: '';
padding: 5% 0;
display: block;
}
p.width_limited {
width: 150px;
}
p.floated {
float: left;