Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

Firefox下负margin耗尽宽度的BUG

  负margin是还好用也很普遍的东西,稍微复杂点的布局,如果不想用relative就需要用负margin来做。不过这玩意儿在Firefox下有个BUG,当元素的宽度加margin的和小于或等于0时就意味着元素的宽度被margin耗尽了,这时盒子模型的计算就会错误。
  在Firefox下,当浮动元素的宽度被margin耗尽时,这个元素就会失去宽度和高度,并且会和行元素重叠起来。
<!DOCTYPE html>
<style>
.a {padding-left:100px;}
.b {
  width:100px;height:1em;float:left;
  margin-left:-100px;background:#EEE;
}
</style>
<div class="a">
  <div class="b"></div>
</div>
次碳酸钴次碳酸钴

  如果宽度没被耗尽就不会有这个问题,即使剩下1的宽度都好 <!DOCTYPE html>
<style>
.a {padding-left:100px;}
.b {
  width:100px;height:1em;float:left;
  margin-left:-99px;background:#EEE; 
}
</style>
<div class="a">
  <div class="b"></div>
</div>
次碳酸钴次碳酸钴

  这里把margin-left改成-99px就可以剩下1px的宽度,所以不会有BUG。我目前就想到这一个解决办法而已。当然,也可以使用padding或border来增加宽度。如果实在是讨厌这样那就避开这种耗尽宽度的负margin用法吧~
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^