• 首页
• 域名注册
• 虚拟主机
• 网站建设
• 服务器租用
• 营销推广
• 网站程序
• 前端开发
• 移动互联网
• 企业邮箱

• 当前位置：创新互联 >> 常见问题 >> 网站建设 >> 网页设计 >> 一个比较完美的spacer div技巧

一个比较完美的spacer div技巧

• 作者：创新互联 文章来源：网页设计 点击数： 更新时间：2012-06-06

•     在制作网页的过程中，自适应问题是经常遇到，而又最让人头疼的，看了好多种解决的方法，但是都不是万能的。今天遇到这个问题，实在让我挠头，借鉴了 Shark的方法，又给了我一个新思路。当时没仔细看LBS的样式表，今天才发现，。clear用的就是这个方法。接下来，我会做个关于“自适应高度”问题的汇总，以便今后遇到问题时候更快解决。
  　　 为了解决浮动元素引起父元素无法获得高度的问题，我们一般在子元素的最后加上一个Spacer Div（clearboth）。但是IE和Mozilla对div的解释不同引起一些表现上的差异。
  　　 最简单的Spacer：
  　　 .HackBox{clearboth;}
  　　 IE可以正确地产生预期的效果，但是在Mozilla中不起作用。所以现在很多人是这么用的
  　　 .HackBox{ height0; clearboth;}
  　　 然后XHTML中加入一个 ；，如下：
  　　 这回IE和Mozilla都起作用了，但是IE并不认 height0;　这个规则，结果IE中的这个Spacer Div就占了一定的高度，影响布局。
  　　 经过N次实验，我发现用下面的方法能比较完美的解决这个问题。
  　　 .HackBox{
  　　 border-top1px solid transparent !important;
  　　 margin-top-1px !important;
  　　 border-top0;
  　　 margin-top0;
  　　 clearboth;
  　　 visibilityhidden;
  　　 }
  　　 其实IE只需要有clearboth;这一条就可以实现我们的要求。那么下面这两条规则有什么用呢？
  　　 border-top1px solid transparent;
  　　 margin-top-1px;
  　　 第一条规则产生1px的一个透明的上边框，第二条将margin-top设置为-1，以抵消这条边框对布局产生的影响。
  　　 但是不幸的是IE不支持transparent这个值，它会将这条边框变为黑色-_-
  　　 不幸中的万幸是IE这小子还有一个不支持的值，就是！important，IE会忽略这它而选择按后面两条显示，结果就是不显示边框（也就是只有clearboth;起作用了）。而Mozilla却会按！important指出的规则显示。

• 各页面布局的网页设计技巧概要 :上一篇
  网页中书签链接的建立 :下一篇