一个比较完美的spacer div技巧

一个比较完美的spacer div技巧

原文出自：http://www.sharkui.com/articles/article.php?id=1

在制作网页的过程中，自适应问题是经常遇到，而又最让人头疼的，看了好多种解决的方法，但是都不是万能的。今天遇到这个问题，实在让我挠头，借鉴了 Shark的方法，又给了我一个新思路。当时没仔细看LBS的样式表，今天才发现，.clear用的就是这个方法。接下来，我会做个关于“自适应高度”问题的汇总，以便今后遇到问题时候更快解决。
为了解决浮动元素引起父元素无法获得高度的问题，我们一般在子元素的最后加上一个Spacer Div（clear:both）。但是IE和Mozilla对div的解释不同引起一些表现上的差异。
最简单的Spacer：
.HackBox{clear:both;}
IE可以正确地产生预期的效果，但是在Mozilla中不起作用。所以现在很多人是这么用的
.HackBox{ height:0; clear:both;}
然后XHTML中加入一个；，如下：
这回IE和Mozilla都起作用了，但是IE并不认 height:0;　这个规则，结果IE中的这个Spacer Div就占了一定的高度，影响布局。
经过N次实验，我发现用下面的方法能比较完美的解决这个问题。

.HackBox{
border-top:1px solid transparent !important;
margin-top:-1px !important;
border-top:0;
margin-top:0;
clear:both;
visibility:hidden;
}

其实IE只需要有clear:both;这一条就可以实现我们的要求。那么下面这两条规则有什么用呢？

border-top:1px solid transparent;
margin-top:-1px;

第一条规则产生1px的一个透明的上边框，第二条将margin-top设置为-1，以抵消这条边框对布局产生的影响。
但是不幸的是IE不支持transparent这个值，它会将这条边框变为黑色-_-
不幸中的万幸是IE这小子还有一个不支持的值，就是!important，IE会忽略这它而选择按后面两条显示，结果就是不显示边框（也就是只有clear:both;起作用了）。而Mozilla却会按!important指出的规则显示。

转载于:https://www.cnblogs.com/binyong/archive/2009/03/17/1414753.html

一个比较完美的spacer div技巧相关推荐

python提取cad坐标_教你一个CAD坐标提取的小技巧
原标题:教你一个CAD坐标提取的小技巧经常用CASS计算土石方的小伙伴,经常会遇到一个很大的拦路虎:拿到一张甲方提供的dwg图纸,要求用CASS进行土石方计算.顿时感觉无从下手了. 遇到这样的问题, ...
Chrome浏览器如何完美实现滚动截图技巧
Chrome浏览器如何完美实现滚动截图技巧 - Chrome插件网一.前言我们平时在浏览网页时,想把碰到好的网页内容或者文章截屏保存,但是网页的长度常常会超出屏幕高度,一般的截屏功能只能截取显示在 ...
一个提高查找速度的小技巧
在一个数组中查找某一个元素,或是在一个字符串中查找某个字符,我们一般都会写出如下代码.这样的代码虽然简洁明了,但在数组元素很多的情况下,并不是一个很好的解决方案,今天我就来分享一个提高查找速度的小技巧 ...
一个linux提权用的技巧
一个linux提权用的技巧,放出来攒RP了. OK,通常情况下,我们在执行bash脚本的时候,有一个执行过程,其中有一点比较重要:如果BASH_ENV被设置的话,它就会执行BASH_ENV指向的脚本 ...
一个近乎完美的Unity全平台原生c#热更方案
今天给大家推荐一个近乎完美的Unity全平台原生c#热更方案,相对比其他方案,此方案学习成本更低.完全支持c#所有特性.兼容性极高.占用内存低.执行小高. 项目简介 HybridCLR是一个特性完整. ...
世上不可能有真正的完美，但应该有一个追求完美的心态
世上不可能有真正的完美,但应该有一个追求完美的心态,并将其作为工作习惯. 目前,很多企业虽然有远大的目标,但在具体实施时,由于缺乏对完美的执着追求,事事以为"差不多"便可,结果是: ...
一个高度不固定的div，里面的文字如何垂直居中？
一个高度不固定的div,里面的文字如何垂直居中? 最近在做项目中遇到父元素高度不固定,但是Dom元素里面的文本内容需要上下居中显示,解决方案: 一.针对弹性布局的盒子: 垂直居中: align-ite ...
爱不是寻找一个完美的人。而是，要学会用完美的眼光，欣赏一个并不完美的人。...
1.曾经以为,这样的一见如故,会是我今生最美丽的相遇:曾经以为,这样的一诺相许,会是我素色年华里最永恒的风景:曾经以为,这样的心心相印,会是我无怨无悔的追逐.却不知,繁华有时,落寞有时,却怎么也读不懂 ...
css div下第一个span,CSS入门教程——div和span
div和span是什么意思? 相对与其他XHTML标签,div和span对于它们包含的元素是没有意义的.例如当你看到标签,你知道里面是标题,当你看到下面我们就来看看div和span的应用实例. 块 ...

一个比较完美的spacer div技巧

一个比较完美的spacer div技巧相关推荐

最新文章

热门文章