BlogJava-无所惧，无所悔,为梦想执着的拼搏-文章分类-CSS 技术文档http://www.blogjava.net/DreamFight/category/41224.htmlzh-cnTue, 01 Mar 2011 21:14:05 GMTTue, 01 Mar 2011 21:14:05 GMT60css中滚动条样式的设置http://www.blogjava.net/DreamFight/articles/335581.htmlDreamFightDreamFightTue, 19 Oct 2010 07:37:00 GMThttp://www.blogjava.net/DreamFight/articles/335581.htmlhttp://www.blogjava.net/DreamFight/comments/335581.htmlhttp://www.blogjava.net/DreamFight/articles/335581.html#Feedback0http://www.blogjava.net/DreamFight/comments/commentRss/335581.htmlhttp://www.blogjava.net/DreamFight/services/trackbacks/335581.html 
参数说明：

1、overflow-y : 设置当对象的内容超过其指定高度时如何管理内容；overflow-x : 设置当对象的内容超过其指定宽度时如何管理内容。

参数:

visible：扩大面积以显示所有内容

auto：仅当内容超出限定值时添加滚动条

hidden：总是隐藏滚动条

scroll：总是显示滚动条

2、height : 设置滚动条的高度（修改其后数值即可）。

3、滚动条颜色参数设置：

scrollbar-3d-light-color 设置或检索滚动条亮边框颜色

scrollbar-highlight-color 设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色

scrollbar-face-color  设置或检索滚动条3D表面（ThreedFace）的颜色

scrollbar-arrow-color  设置或检索滚动条方向箭头的颜色

scrollbar-shadow-color  设置或检索滚动条3D界面的暗边（ThreedShadow）颜色

scrollbar-dark-shadow-color 设置或检索滚动条暗边框（ThreedDarkShadow）颜色

scrollbar-base-color  设置或检索滚动条基准颜色

xhtml中隐藏滚动条

在用ie6浏览有框架的xhtml页面的时候，默认会水平和垂直滚动条会一起出现，这是ie6的一个bug，在firefox上是正常的，出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷.对于这个bug一般有3种解决方案，
方法1:
代码：
html { overflow-y: scroll; }
原理：强制显示ie的垂直滚动条，而忽略水平滚动条
优点：完全解决了这个问题, 允许你保持完整的XHTML doctype.
缺点：即使页面不需要垂直滚动条的时候也会出现垂直滚动条。
方法2:
代码：
html { overflow-x: hidden; overflow-y: auto; }
原理：隐藏横向滚动，垂直滚动根据内容自适应
优点：在视觉上解决了这个问题.在不必要的时候, 未强制垂直滚动条出现.
缺点：只是隐藏了水平滚动条，如果页面真正需要水平滚动条的时候，
屏幕以外的内容会因为用户无法水平滚动，而看不到。
方法3:
代码：
body { margin-right: -15px; margin-bottom: -15px; }
原理：这会在margin的水平和垂直方向上添加一个负值, IE添加了该精确数值后, 便会去除对滚动条的需求假象.
优点：在视觉上解决了这个问题.，垂直滚动根据内容自适应
缺点：由于"人为创建"了15px的外边距(margin), 所以无法使用该填充过的屏幕区域.

设置滚动条样式

在原来的html的时候，我们可以这样定义整个页面的滚动条
body{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
   scrollbar-highlight-color:#fff; /*- 左二 -*/
   scrollbar-face-color:#E4E4E4; /*- 面子 -*/
   scrollbar-arrow-color:#666; /*- 箭头 -*/
   scrollbar-shadow-color:#808080; /*- 右二 -*/
   scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
   scrollbar-base-color:#D7DCE0; /*- 基色 -*/
   scrollbar-track-color:#;/*- 滑道 -*/
}

但是同样的代码，我们应用在 xhtml下就不起作用了，我相信好多好朋友也遇到过同样的问题
那么怎么才能在xhtml下应用滚动条样式呢？看下列代码
html{
scrollbar-3dlight-color:#D4D0C8; /*- 最外左 -*/
   scrollbar-highlight-color:#fff; /*- 左二 -*/
   scrollbar-face-color:#E4E4E4; /*- 面子 -*/
   scrollbar-arrow-color:#666; /*- 箭头 -*/
   scrollbar-shadow-color:#808080; /*- 右二 -*/
   scrollbar-darkshadow-color:#D7DCE0; /*- 右一 -*/
   scrollbar-base-color:#D7DCE0; /*- 基色 -*/
   scrollbar-track-color:#;/*- 滑道 -*/
}

这段代码和上一段唯一的不同就是在css定义的元素上，一个是body一个是html。我们再测试一下，把html页面的"body"修改成"html"测试一下，发现依然可以实现效果。那到底是为什么呢？

从字面上来看，xhtml比html多一个x,那么这个x其实也就是xml,为什么要加一个xml在里面？其实最根本的原因就是要让html更加结构化标 准化（因为html实在是太烂）。我们在html里面定义的是body，因为html不是很标准所以这样可以生效，而在xhtml里面这样就不行了，我看 看那个图很明显，body标签本身不是根元素，只有html才是根元素，而页面的滚动条也是属于根元素的，所以这就是我们为什么定义body没有效果的原 因，因为我们定义的只是一个子原素。ok，我们知道了原理，来做一个试验如果把定义"body"或"xhtml"换成"*"，
*{
scrollbar-3dlight-color:#D4D0C8;
   scrollbar-highlight-color:#fff;
   scrollbar-face-color:#E4E4E4;
   scrollbar-arrow-color:#666;
   scrollbar-shadow-color:#808080;
   scrollbar-darkshadow-color:#D7DCE0;
   scrollbar-base-color:#D7DCE0;
   scrollbar-track-color:#;
}

在html和xhtml都通过，因为*就是定义页面上的任何标签当然也包括了“html”这个标签。

(ps:其实与其说是html与xhtml的区别到不如说是有无XHTML 1.0 transitional doctype的区别，但是如果你把页面的XHTML 1.0 transitional doctype去掉的话，那么这个页面就没有doctype，默认的显示方式就是html4.01,不过你要把XHTML 1.0 transitional doctype修改成HTML 4.01 doctype同样页面定义body也不会有效果的，虽然这个页面的标准是html 4.01) 
















文章出处：养鸡设备

养鸡热风炉 


DreamFight 2010-10-19 15:37 发表评论
]]>JS获取浏览器窗口大小 获取屏幕参数http://www.blogjava.net/DreamFight/articles/335559.htmlDreamFightDreamFightTue, 19 Oct 2010 05:01:00 GMThttp://www.blogjava.net/DreamFight/articles/335559.htmlhttp://www.blogjava.net/DreamFight/comments/335559.htmlhttp://www.blogjava.net/DreamFight/articles/335559.html#Feedback0http://www.blogjava.net/DreamFight/comments/commentRss/335559.htmlhttp://www.blogjava.net/DreamFight/services/trackbacks/335559.html

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量


IE，FireFox 差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

－－－－－－－－－－－－－－－－－－－

技术要点
本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在 IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

实现代码

1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            13
            14
            15
            16
            17
            18
            19
            20
            21
            22
            23
            24
            25
            26
            27
            28
            29
            30
            31
            32
            33
            34
            35
            36
            37
            38
            39
            40
            41
            42
            43
            44
            45
            46
            47
            48
            
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <title>请调整浏览器窗口</title>
            <meta http-equiv="content-type" content="text/html; charset=gb2312">
            </meta></head>
            <body>
            <h2 align="center">请调整浏览器窗口大小</h2><hr />
            <form action="#" method="get" name="form1" id="form1">
            <!--显示浏览器窗口的实际尺寸-->
            浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br />
            浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br />
            </form>
            <script type="text/javascript">
            <!--
            var winWidth = 0;
            var winHeight = 0;
            function findDimensions() //函数：获取尺寸
            {
            //获取窗口宽度
            if (window.innerWidth)
            winWidth = window.innerWidth;
            else if ((document.body) && (document.body.clientWidth))
            winWidth = document.body.clientWidth;
            //获取窗口高度
            if (window.innerHeight)
            winHeight = window.innerHeight;
            else if ((document.body) && (document.body.clientHeight))
            winHeight = document.body.clientHeight;
            //通过深入Document内部对body进行检测，获取窗口大小
            if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth)
            {
            winHeight = document.documentElement.clientHeight;
            winWidth = document.documentElement.clientWidth;
            }
            //结果输出至两个文本框
            document.form1.availHeight.value= winHeight;
            document.form1.availWidth.value= winWidth;
            }
            findDimensions();
            //调用函数，获取数值
            window.onresize=findDimensions;
             
            //-->
            </script>
            </body>
            </html>

源程序解读

（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。

（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。

（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。

（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。

（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。



DreamFight 2010-10-19 13:01 发表评论
]]>利用js使png透明图像在ie6下正常使用http://www.blogjava.net/DreamFight/articles/335343.htmlDreamFightDreamFightSun, 17 Oct 2010 01:05:00 GMThttp://www.blogjava.net/DreamFight/articles/335343.htmlhttp://www.blogjava.net/DreamFight/comments/335343.htmlhttp://www.blogjava.net/DreamFight/articles/335343.html#Feedback0http://www.blogjava.net/DreamFight/comments/commentRss/335343.htmlhttp://www.blogjava.net/DreamFight/services/trackbacks/335343.html 详细进解在下边文件中请下载使用：
http://www.blogjava.net/Files/DreamFight/msiepng.rar

DreamFight 2010-10-17 09:05 发表评论
]]>用js动态改变css样式表http://www.blogjava.net/DreamFight/articles/335342.htmlDreamFightDreamFightSun, 17 Oct 2010 00:48:00 GMThttp://www.blogjava.net/DreamFight/articles/335342.htmlhttp://www.blogjava.net/DreamFight/comments/335342.htmlhttp://www.blogjava.net/DreamFight/articles/335342.html#Feedback0http://www.blogjava.net/DreamFight/comments/commentRss/335342.htmlhttp://www.blogjava.net/DreamFight/services/trackbacks/335342.html
第一步：在连接样式表的元素里定义一个id,例如

<link href="1.css" rel="stylesheet" type="text/css" id="css">

我定义的id是css。

第二步：写一个js函数，代码如下：

<script type="text/javascript">
function change(a){
var css=document.getElementById("css");
if (a==1)
css.setAttribute("href","1.css");
if (a==2)
css.setAttribute("href","2.css");
}
</script>

这个函数的code可以放在页面的任何地方。

第三步：为改变页面的样式表的连接添加一个函数的触发事件，代码如下：

<a href="#" onClick="change(1)">1.css</a>
<a href="#" onClick="change(2)">2.css</a>

该效果在IE和FF下均测试通过，相信大家看完后因该非常明了，利用这个方法我们可以让浏览者自己选择需要显示的样式表，比如年老者可以选择一个字体较大的样式表。这里需要注意的两点是：

在这个例子中函数名function后面的名字不能为links或者link，如果为links或者link，样式表将不被改变，具体什么原因我也不大清楚，可能是javascript的保留字符。
另外如果是改变整个页面的样式，你需要在样式表文件里定义body的高度为100%


还有一种方法：

<script language="javascript">
var b_v = navigator.appVersion;
var IE6 = b_v.search(/MSIE 6/i) != -1;
var IE7 = b_v.search(/MSIE 7/i) != -1;
if (IE6) {
document.write("<link href=""css/neiye_ie6.css"" rel=""stylesheet"" type=""text/css"" id=""cssStyle"" />");
}else{
document.write("<link href=""css/neiye.css"" rel=""stylesheet"" type=""text/css"" id=""cssStyle"" />");
}
</script>




自动化养鸡设备


DreamFight 2010-10-17 08:48 发表评论
]]>区别不同浏览器http://www.blogjava.net/DreamFight/articles/326339.htmlDreamFightDreamFightFri, 16 Jul 2010 10:12:00 GMThttp://www.blogjava.net/DreamFight/articles/326339.htmlhttp://www.blogjava.net/DreamFight/comments/326339.htmlhttp://www.blogjava.net/DreamFight/articles/326339.html#Feedback0http://www.blogjava.net/DreamFight/comments/commentRss/326339.htmlhttp://www.blogjava.net/DreamFight/services/trackbacks/326339.html区别不同浏览器，CSS hack写法：
区别IE6与FF：
       background:orange;*background:blue;

区别IE6与IE7：
       background:green !important;background:blue;

区别IE7与FF：
       background:orange; *background:green;

区别FF，IE7，IE6：
       background:orange;*background:green !important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;


 IE6 IE7 FF
* √ √ ×
!important × √ √


另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6，IE7，firefox
: background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。


DreamFight 2010-07-16 18:12 发表评论
]]>The Underscore Hack http://www.blogjava.net/DreamFight/articles/323612.htmlDreamFightDreamFightTue, 15 Jun 2010 06:22:00 GMThttp://www.blogjava.net/DreamFight/articles/323612.htmlhttp://www.blogjava.net/DreamFight/comments/323612.htmlhttp://www.blogjava.net/DreamFight/articles/323612.html#Feedback0http://www.blogjava.net/DreamFight/comments/commentRss/323612.htmlhttp://www.blogjava.net/DreamFight/services/trackbacks/323612.html
  • 下划线“_”在 CSS2.1 规范中是被承认的 CSS 标识。
  • 浏览器会忽略未知的 CSS 属性。
  • MSIE5+（Windows）会忽略 CSS 属性名前的 “_”。

    • 因此，这个 CSS 的分析是，例如： _color:red。首页， 正确的，对于 CSS2.1 规范来说是被允许的（即使软件验证，只支持 CSS2.0 老版本，说它是一个 Bug ：他们是错误的，但它是正确的）。其次， 被任何浏览器忽略，除了 IE 。最后， 当颜色被处理：在 WinIE 中是红色。

    如上，这就是所说的 IE 的 Bug ，特征是以简单明了的方式建立仅对 WinIE 有效的 CSS 属性（MacIE 没有这样的 Bug 和特征）。这样很容易调整，例如被错误执行的位置：在 WinIE 中被调整（见例子）。

    #menu {
    
position    : fixed;
    
_position    : absolute;
    
    ...
    
    }

    同样的方法可以用来调整 min-height 的属性在 WinIE 中消失的现象（见例子）

    #box {
    
min    -height: 300px;
    
height    : auto;
    
_height    : 300px;
    
    ...
    
    }

    注：这是利用另外一个 WinIE 的 Bug ，当 height: auto 时处理为 overflow：visible 。详细资料，看这篇文章《The “min-height” Hack”》。

    测试环境：Windows’ MSIE 5, 5.5, 6, Opera, Mac OSX’s MSIE 5, Safari, Camino, Mozilla , Firefox。

    补充说明：标准模式下的 IE7 将不再解析下划线开头的属性，但是会把它当作一个“用户自定义”属性。自定义属性并不能应用到表现上，但是它会存在于文档模型中，可以使用脚本来访问。

    而非标准模式下的IE7依旧解析“_” Bug。






    屏蔽IE浏览器（也就是IE下不显示）
    *:lang(zh) select {font:12px  !important;} /*FF,OP可见，特别提醒：由于Opera最近的升级，目前此句只为FF所识别*/
    select:empty {font:12px  !important;} /*safari可见*/
    这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。
    仅IE7与IE5.0可以识别
    *+html  select {…}
    当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。
    仅IE7可以识别
    *+html  select {…!important;}
    当面临需要只针对IE7做样式的时候就可以采用这个HACK。
    IE6及IE6以下识别
    * html  select {…}
    这个地方要特别注意很多博客都写成了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
    html/**/ >body  select {…}
    这句与上一句的作用相同。
    仅IE6不识别，屏蔽IE6
    select { display /*屏蔽IE6*/:none;}
    这里主要是通过CSS注释分开一个属性与值，注释在冒号前。
    仅IE6与IE5不识别，屏蔽IE6与IE5
    select/**/ { display /*IE6,IE5不识别*/:none;}
    这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。不屏蔽IE5.5
    仅IE5不识别，屏蔽IE5
    select/*IE5不识别*/ {…}
    这一句是在上一句中去掉了属性区的注释。只有IE5不识别，IE5.5可以识别。
    盒模型解决方法
    selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:正确宽度;}
    盒模型的清除方法不是通过!important来处理的。这点要明确。
    清除浮动
    select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
    在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的HACK来对父级做一次定义，那么就可以解决这个问题。
    截字省略号
    select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
    这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。
    只有Opera识别
    @media all and (min-width: 0px){ select {……} }
    针对Opera浏览器做单独的设定。

    以上都是写CSS中的一些HACK，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式，也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

    IE5.x的过滤器，只有IE5.x可见
    @media tty {
    i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
    }/* */
    IE5/MAC的过滤器，一般用不着
    /*\*//*/
        @import "ie5mac.css";
    /**/
    IE的if条件Hack
    <!--[if IE]> Only IE <![endif]-->
    所有的IE可识别
    <!--[if IE 5.0]> Only IE 5.0 <![endif]-->
    只有IE5.0可以识别
    <!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
    IE5.0包换IE5.5都可以识别
    <!--[if lt IE 6]> Only IE 6- <![endif]-->
    仅IE6可识别
    <!--[if gte IE 6]> Only IE 6/+ <![endif]-->
    IE6以及IE6以下的IE5.x都可识别
    <!--[if lte IE 7]> Only IE 7/- <![endif]-->
    仅IE7可识别

    以上内容可能并不全面，欢迎大家能和我一起把这些技巧都汇总起来，为以后工作的查询提供一个方便，同时在这里感谢那些研究出这些HACK的作者们。

     



    DreamFight 2010-06-15 14:22 发表评论
    ]]>    总结清除浮动的方法http://www.blogjava.net/DreamFight/articles/314916.htmlDreamFightDreamFightTue, 09 Mar 2010 02:22:00 GMThttp://www.blogjava.net/DreamFight/articles/314916.htmlhttp://www.blogjava.net/DreamFight/comments/314916.htmlhttp://www.blogjava.net/DreamFight/articles/314916.html#Feedback0http://www.blogjava.net/DreamFight/comments/commentRss/314916.htmlhttp://www.blogjava.net/DreamFight/services/trackbacks/314916.html

    CSS教程：总结清除浮动的方法

    网页制作Webjx文章简介：很多人都有研究闭合浮动元素的问题，但是解决方法却不一样，也并不是每一种方法都尽善尽美。闭合浮动元素（或者叫清除浮动）是web标准设计中经常会遇到的一个问题，因此，这里我想总结一下目前经常用到的几种方法，并比较一下他们的易用性和适用环境。如果你有更好的方

    作者：Dudo

    原文连接：http://www.dudo.org/article.asp?id=239

    很多人都有研究闭合浮动元素的问题，但是解决方法却不一样，也并不是每一种方法都尽善尽美。闭合浮动元素（或者叫清除浮动）是web标准设计中经常会遇到的一个问题，因此，这里我想总结一下目前经常用到的几种方法，并比较一下他们的易用性和适用环境。如果你有更好的方法不妨提出来大家一起讨论。

    问题的提出：

    最简单的一种情形就是我们把一个小的、固定宽度的div元素（比如导航、引用等）和其他元素内容一起包含在一个大的div中。比如下面这段代码：

    <div id="outer">    
      <div id="inner"> <h2>A Column</h2> </div>    
      <h1>Main Content</h1>    
      <p>Lorem ipsum</p>    
    </div>

    我们可以为“#inner”设定一个宽度值（比如说20%），但是由于div是块级元素，即使我们设定了宽度，其后面的内容也只能在下一行中显示，除非我们给它设定一个浮动属性（无论是向左浮动或者向右浮动）。那么此时会产生我们上面提到的问题了。

    如果“#inner”的宽度和高度都比“#outer”小，这不会有问题。

    但是，如果“#inner”的高度超过了“#outer”，那么的底部就会超出“#outer”的底部。这是因为我们为“#inner”设定了float属性后，它就会脱离的文本流，无论其宽度和高度怎么变化都不会使“#outer”跟随变化。

    例一：未清除浮动时的布局表现


    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

    在这个例子中，最开始由于“#inner”的高度小于“#outer”所以不会有问题，但是当你点击“加长”后你会发现“#inner”的底边已经超出了“#outer”的范围，而“#outer”没有发生改变。这就是我们所提到的“清除浮动（闭合浮动元素）”或者是“闭合浮动”问题

    解决办法：

    1）额外标签法

    第一个，也是W3C推荐的方法就是使用额外标签的办法。这种方法就是在内容的末尾增加一个空的标签，典型的做法就是使用类似

    <br style="clear:both;" />

    或者使用

    <div style="clear:both;"></div>

    这种办法通过增加一个HTML元素迫使外部容器撑开。不过这个办法会增加额外的标签使HTML结构看起来不够简洁。

    例二：使用空div闭合浮动元素


    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

    P.S. 我发现在Internet Explorer中（无论是6还是7）<br style="clear:both" />可以清除浮动，但是不能闭合浮动元素，在Firefox中就没有这个问题，不知道是什么原因？！

    2）使用after伪类

    使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容：

    #outer:after{ 
        content:"."; 
        height:0; 
        visibility:hidden; 
        display:block; 
        clear:both;

    但奇怪的是Windows中的Internet Explorer 6及以下版本并不支持CSS 2.1中的after伪类而Mac中的Internet Explorer却可以正常使用，所以我们还要单独针对Win/IE进行处理。在区分Win和Mac中Internet Explorer的诸多方法中，最常用就是Holly招数。Holly招数的原理是这样的，CSS代码

    /* 这段代码只有IE/Win可以看见 \*/
    CSS 规则 
    /* 结束Hack */

    上面的代码中有两行注释，其中第一行结束时出现了反斜杠（\），在Mac的Internet Explorer中会认为注释并没有结束，于是继续向下直到第一个完事的“*/”出现，这中间的所有字符都被当作是注释，而IE/Win却也只会把第一行和第三行看作是注释，中间的为有效代码。所以这样就区分出来了不同平台上的IE了。

    正是基于以上原理，在windows的IE 6上的清理浮动，可以使用如下代码：

    #outer { 
        display:inline-block; 
    } 
    /* Holly Hack Begine \*/ 
    * html #outer { 
        height:1%; 
    } 
    #outer { 
        display:block; 
    } 
    /* End Hack */

    例三：使用:after伪类清理浮动


    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

    P.S. 如果你不考虑 IE6/Mac用户的话你只需要写* html #outer {height:1%;}即可。

    另外，似乎在Internet Explorer 7中不高display:inline-block也不好使。因此要使用最完整的Hack招数。

    如果你对如何使用CSS 2中的伪类不熟悉的话，推荐你先阅读一下“细说CSS样式选择符——CSS 2.1 Selectors（1）、（2）、（3）”

    3）浮动外部元素，float-in-float

    这种方法很简单，就是把“#outer”元素也进行浮动（向左或者向右）。

    例子

    但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化，所以使用这种方法一定要小心。有选择把页面中的所有元素都浮动起来，最后使用一个适当的有意义的元素（比如页脚）进行清理浮动，这有助于减少不必要的标记，但是过多的浮动会增加布局的难度。

    例四：float-in-float


    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

    4）设置overflow为hidden或者auto

    把“#outer”的属性overflow值设置为hidden或者auto同样可以清理浮动

    这种方法不需要添加额外的标记。但是使用overflow的时候一定要小心，因为它会浏览器的表现。另外，在Internet Explorer 6中单纯地设置overflow为hidden或者auto并不能有效清除浮动（闭合浮动元素），还要指定“#outer”的一个维度，即要么给它指定一个宽度，要么指定一个高度：

    #outer {
        overflow:auto;
        width:100%;
    }

    注意：如果你要在IE5/Mac上使用这种方法清除浮动（闭合浮动元素）的话，你就必须设定overflow的属性为值为hidden。

    例五：overflow:hidden


    [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

    比较与选择

    四种方法中使用哪种最好呢？首先，不推荐使用after伪类，对比其它三种方法，holly招数有点太烦琐，不好掌握，我上面讲到的holly招数中并不仅仅是IE/Win上有问题，当出现:hover时还会有其它问题，所以我们又加上了inline-block等属性，也就是说这种方法存在更多的不确定性。推荐对代码有“洁癖”并且技术较高的人使用。
        那么其它三种方法其实都可以考虑。

    不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面；

    而对于使用额外标签清除浮动（闭合浮动元素），是W3C推荐的做法。至于使用<br />元素还是空<div></div>可以根据自己的喜好来选（当然你也可以使用其它块级元素）。不过要注意的是，<br />本身是有表现的，它会多出一个换行出来，所以要设定它的heigh为0，以隐藏它的表现。所以大多数情况下使用空<div>比较合适。

    float-in-float，也是一个很好的选择，把你要进行清理浮动的元素外层再加上一层<div>并设置属性fload:left即可，不过要注意相邻元素的变化。



    DreamFight 2010-03-09 10:22 发表评论
    ]]>    firefox margin-top失效的原因与解决办法http://www.blogjava.net/DreamFight/articles/290587.htmlDreamFightDreamFightMon, 10 Aug 2009 13:38:00 GMThttp://www.blogjava.net/DreamFight/articles/290587.htmlhttp://www.blogjava.net/DreamFight/comments/290587.htmlhttp://www.blogjava.net/DreamFight/articles/290587.html#Feedback0http://www.blogjava.net/DreamFight/comments/commentRss/290587.htmlhttp://www.blogjava.net/DreamFight/services/trackbacks/290587.html 为什么要翻译这篇说明？css2本有人已翻译过，但看一下，很粗糙（不是说自己就怎么怎么样啊，翻译者真的是很值得敬佩的！），近来跟css与xhtml接触得越来越多，但接触得越多，迷惑却总不见少。
    现在我觉得很多问题根本不能称之为问题，原因就在于我们的草率理解，比如杀鸡用牛刀，不是不可以，是不合理、不恰当，根源错了，表象也就会错了，如果解决问题从表象入手，难免总会摸不着头脑，还是那句话，要脚踏实地，切莫浮躁。
    在这个说明中，“collapsing margins”（折叠margin）的意思是：2个或以上盒模型之间（关系可以是相邻或嵌套）相邻的margin属性（这之间不能有非空内容、 padding区域、border边框或使用清除分离方法）结合表示为一个单独的margin。
    在css2.1中，水平的margin不会被折叠。
    垂直margin可能在一些盒模型中被折叠：
    1、在常规文档流中，2个或以上的块级盒模型相邻的垂直margin会被折叠。
    最终的margin值计算方法如下：
    a、全部都为正值，取最大者；
    b、不全是正值，则都取绝对值，然后用正值减去最大值；
    c、没有正值，则都取绝对值，然后用0减去最大值。
    注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。
    2、相邻的和模型中，如果其中的一个是浮动的（floated），垂直margin不会被折叠，甚至一个浮动的盒模型和它的子元素之间也是这样。
    3、设置了overflow属性的元素和它的子元素之间的margin不会被折叠（overflow取值为visible除外）。
    4、设置了绝对定位（position:absolute）的盒模型，垂直margin不会被折叠，甚至和他们的子元素之间也是一样。
    5、设置了display:inline-block的元素，垂直margin不会被折叠，甚至和他们的子元素之间也是一样。
    6、如果一个盒模型的上下margin相邻，这时它的margin可能折叠覆盖（collapse through）它。在这种情况下，元素的位置（position）取决于它的相邻元素的margin是否被折叠。
    a、如果元素的margin和它的父元素的margin-top折叠在一起，盒模型border-top的边界定义和它的父元素相同。
    b、另外，任意元素的父元素不参与margin的折叠，或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零，那么元素的border-top边界位置和原来一样。
    一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom折叠。
    注意，那些已经被折叠覆盖的元素的位置对其他已经被折叠的元素的位置没有任何影响；只有在对这些元素的子元素布局时，border-top边界位置才是必需的。
    7、根元素的垂直margin不会被折叠。
    浮动的块级元素的margin-bottom总是与它后面的浮动块级兄弟元素（floated next in-flow block-level sibling）的margin-top相邻，除非那个同级元素使用了清除操作。
    浮动的块级元素的margin-top和它的第一个浮动块级子元素（floated first in-flow block-level child）的margin-top相邻（如果该元素没有border-top，没有padding-top，并且子元素没有使用清除操作）。
    浮动的块级元素的margin-bottom如果符合下列条件，那么它和它的最后一个浮动块级子元素的margin-bottom相邻（如果该元素没有指定padding-bottom或border）：
    a、指定了height:auto
    b、min-height小于元素的实际使用高度（height）
    c、max-height大于元素的实际使用高度（height）
    如果一个元素的min-height属性设置为0，那么它所拥有的margin是相邻的，并且它既没有border-top和border- bottom，也没有padding-top和padding-bottom，它的height属性可以是0或auto，它不能包含一个内联的盒模型（line box），它所有的浮动子元素（如果有的话）的margin也都是相邻的。
    当一个元素拥有的margin折叠了，并且它使用了清除操作，那么它的margin-top会和紧随其后的兄弟元素的相邻margin折叠，但结果是它的margin将无法和其块级父元素的margin-bottom折叠。
    折叠操作是以padding、margin、border的值为基础的（即在浏览器解析所有这些值之后），折叠后的margin计算将覆盖已使用的不同margin的值。
    [复制此代码]CODE:


    //不加入br这一行，在FIREFOX中id1的margin-top:20px将会在d0上作用，使d0上方与body间有20px的间距,d1与d0的上方没有间距，而IE内正常显示


    DreamFight 2009-08-10 21:38 发表评论
    ]]>