如果您在Chrome或Firefox中使用像素,它可以正常工作,即使您使用所有百分比,但使用像素设置父div宽度也可以.但是,如果你使用所有百分比FF Chrome似乎完全是下铺,并根据我无法弄清楚的东西渲染百分比.
Fiddle Example:在Safari和FF / Chrome中查看此内容,以确定Safari呈现的#pixels与#percents相同,并且应该在两者中呈现.是Safari正在渲染这个错误吗?
<div class="container"> <div class="pretendImage"></div> <div id="percents"></div> </div>
和我的CSS:
#percents { width:100%; height:100%; position:absolute; top:50%; left:50%; margin:-50% 0 0 -50%; } .container { position:relative; width:50%; height:auto; } .pretendImage { width:200px; height:200px; }
好吧,我通过添加一个额外的包装器找到了一种解决方法.我仍然想知道是什么原因引起的.
My workaround: Fiddle使用包装器以避免必须计算使用80%宽度/高度的内部div的顶部边距.
解决方法
宽度,左边距和边距左边的百分比是相对于其包含块的宽度 – 即具有类“容器”的div.包含块的宽度被确定为其包含块的百分比,在jsfiddle的情况下,它是初始包含块,它本身与视口的宽度相同.这不是您计算您认为需要的百分比的方式.您可以通过收缩包装位置:relative(使用display:inline-block;或float:left;)并在其外创建另一个包装div来处理这个,以隔开视口中的元素.
奇怪的是边缘顶部(和边缘底部)百分比.这些是相对于容器块的宽度.这没有用,除非包含块具有已知且固定的宽高比,否则几乎无法做到这一点,在这种情况下,您可以根据宽度和宽高比计算所需高度的百分比值.
不知道Safari正在做什么,但听起来很严重.
原文地址:https://www.jb51.cc/html/225635.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。