亚洲明星合成图综合区在线,国产亚洲精久久久久久无码,亚洲色偷偷偷网站色偷一区

DreamFight — Sun, 17 Oct 2010 01:05:00 GMT

详细�q�解在下�Ҏ��件中请下载��用：
http://www.tkk7.com/Files/DreamFight/msiepng.rar

DreamFight 2010-10-17 09:05 发表评论

DreamFight — Sun, 17 Oct 2010 00:48:00 GMT

用setAttribute�Ҏ��实现一个页面两份样式表的效果，具体�Ҏ��如下�Q?

�W�一步：在连接样式表的元素里定义一个id,例如

我定义的id是css�?

�W�二步：写一个js函数�Q�代码如下：

�q�个函数的code可以攑֜��面的�Q何地斏V�?

�W�三步：为改变页面的样式表的�q�接��d��一个函数的触发事�g�Q�代码如下：

1.css
2.css

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

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

�q�有一�U�方法：

自动化养鸡设�?/a>

DreamFight 2010-10-17 08:48 发表评论

DreamFight — Fri, 16 Jul 2010 10:12:00 GMT

区别不同��览器，CSS hack写法�Q?/h3>

区别IE6�?span class="orange">FF�Q?/div>
background:orange;background:blue;

区别IE6�?span class="green">IE7�Q?/div>
background:green !important;background:blue;

区别IE7�?span class="orange">FF�Q?/div>
background:orange; background:green;

区别FF�Q?span class="green">IE7�Q?span class="blue">IE6�Q?/div>
background:orange;background:green !important;background:blue;

注：IE都能识别;标准��览�?如FF)不能识别�Q?/div>
IE6能识�?�Q�但不能识别 !important,

IE7能识�?�Q�也能识�?important;

FF不能识别�Q�但能识�?important;

IE6 IE7 FF

√ √ ×

!important × √ √

另外再补充一个，下划�U?_",
IE6支持下划�U�，IE7和firefox均不支持下划�Uѝ�?br />
于是大家�q�可以这��h��区分IE6�Q?span class="green">IE7�Q?span class="orange">firefox
: background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中��_��IE6的写在最后面�?br />

DreamFight 2010-07-16 18:12 发表评论

The Underscore Hack

DreamFight — Tue, 15 Jun 2010 06:22:00 GMT

下划�U?#8220;_”�?CSS2.1 规范中是被承认的 CSS 标识�?
��览器会忽略未知�?CSS 属性�?
MSIE5+�Q�Windows�Q�会忽略 CSS 属性名前的 “_”�?

因此�Q�这�?CSS 的分析是�Q�例如： _color:red。首��，正确的，对于 CSS2.1 规范来说是被允许的（即��软�g验证�Q�只支持 CSS2.0 老版本，说它是一�?Bug �Q�他们是错误的，但它是正��的�Q�。其�ơ，被�Q何浏览器忽略�Q�除�?IE 。最后，当颜色被处理�Q�在 WinIE 中是�U�色�?/p>

如上�Q�这��是所说的 IE �?Bug �Q�特征是以简单明了的方式建立仅对 WinIE 有效�?CSS 属性（MacIE 没有�q�样�?Bug 和特征）。这样很�Ҏ��调整�Q�例如被错误执行的位�|�：�?WinIE 中被调整�Q�见例子�Q��?/p>

#menu {

position: fixed;

_position: absolute;

...

}

同样的方法可以用来调�?min-height 的属性在 WinIE 中消��q��现象�Q�见例子�Q?/p>

#box {

min-height: 300px;

height: auto;

_height: 300px;

...

}

注：�q�是利用另外一�?WinIE �?Bug �Q�当 height: auto 时处理�ؓ overflow�Q�visible 。详�l�资料，看这��文�?a target="_blank">《The “min-height” Hack”�?/a>�?/p>

��试环境�Q�Windows’ MSIE 5, 5.5, 6, Opera, Mac OSX’s MSIE 5, Safari, Camino, Mozilla , Firefox�?/p>

补充说明�Q?/strong>标准模式下的 IE7 ��不再解析下划线开头的属性，但是会把它当作一�?#8220;用户自定�?#8221;属性。自定义属性�ƈ不能应用到表��C��Q�但是它会存在于文档模型中，可以使用脚本来访问�?/p>

而非标准模式下的IE7依旧解析“_” Bug�?/p>

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

以上都是写CSS中的一些HACK�Q�这些都是用来解军_��部的兼容性问题，如果希望把兼�Ҏ��的内容也分��d��来，不妨试一下下面的几种�q��o器。这些过滤器有的是写在CSS中通过�q��o器导入特别的样式�Q�也有的是写在HTML中的通过条�g来链接或是导入需要的补丁样式�?/p>

IE5.x的过滤器�Q�只有IE5.x可见: @media tty {
i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";}
}/* */
IE5/MAC的过滤器�Q�一般用不着: /*\*//*/
@import "ie5mac.css";
/**/
IE的if条�gHack: 所有的IE可识�?/span>

只有IE5.0可以识别

IE5.0包换IE5.5都可以识�?/span>

仅IE6可识�?/span>

IE6以及IE6以下的IE5.x都可识别

仅IE7可识�?/span>

以上内容可能�q�不全面�Q�欢�q�大家能和我一��h��q�些技巧都汇总�v来，��Z��后工作的查询提供一个方便，同时在这里感谢那些研�I�出�q�些HACK的作者们�?/p>

DreamFight 2010-06-15 14:22 发表评论

DreamFight — Tue, 09 Mar 2010 02:22:00 GMT

http://www.webjx.com/css/divcss-5991.html

CSS教程�Q��ȝ��清除��动的方�?/h1>

�|�页制作Webjx文章��介：很多人都有研�I��合��Q动元素的问题�Q�但是解��x��法却不一��P��也�ƈ不是每一�U�方法都��善��美。闭合��Q动元素（或者叫清除��动�Q�是web标准设计中经�怼�遇到的一个问题，因此�Q�这里我��x�ȝ��一下目前经常用到的几种�Ҏ��Q��ƈ比较一下他们的易用性和适用环境。如果你有更好的�?/font>

作者：Dudo

原文�q�接�Q?a target="_blank">http://www.dudo.org/article.asp?id=239

很多人都有研�I��合��Q动元素的问题�Q�但是解��x��法却不一��P��也�ƈ不是每一�U�方法都��善��美。闭合��Q动元素（或者叫清除��动�Q�是web标准设计中经�怼�遇到的一个问题，因此�Q�这里我��x�ȝ��一下目前经常用到的几种�Ҏ��Q��ƈ比较一下他们的易用性和适用环境。如果你有更好的�Ҏ��不妨提出来大家一赯��论�?/p>
问题的提出：

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



A Column



Main Content


Lorem ipsum


我们可以�?#8220;#inner”讑֮�一个宽度��|��比如�?0%�Q�，但是�׃��div是块�U�元素，即��我们讑֮�了宽度，其后面的内容也只能在下一行中昄��Q�除非我们给它设定一个��Q动属性（无论是向左��Q动或者向��x�Q动）。那么此时会产生我们上面提到的问题了�?/p>
如果“#inner”的宽度和高度都比“#outer”��，�q�不会有问题�?/p>
但是�Q�如�?#8220;#inner”的高度超�q�了“#outer”�Q�那么的底部��׃��出“#outer”的底部。这是因为我们�ؓ“#inner”讑֮�了float属性后�Q�它��׃��q��的文本流�Q�无论其宽度和高度怎么变化都不会��“#outer”跟随变化�?/p>
例一�Q�未清除��动时的布局表现

<!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> 清除��动�Q�闭合��Q动元素）例一�Q�问题的提出 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #outer { background-color:#999; border:3px solid #666; } #inner { background-color:#ccc; float:left; width:26%; } #inner , #outer p { margin: 5px 5px 5px 10px; } kbd { display:block; background:#fafaff; border:1px solid #b0c0d0; text-indent:0px; } kbd:first-line { color:#c3c; font-weight:bold; text-indent:20px } #footer { clear:both; border:3px solid #333; background-color:#999; margin-top:15px; height:60px; line-height:60px } ul,li,h1 { margin:0;padding:0} </style> <script type="text/javascript"> // <![CDATA[ / Pixy's filler generator - http://www.pixy.cz/blogg/clanky/css-3col-layout/ / function toggleContent(name,n) { var i,t='',el = document.getElementById(name); if (!el.origCont) el.origCont = el.innerHTML; for (i=0;i<n;i++) t += el.origCont; el.innerHTML = t; } // ]]> </script> </head> <body> <div id="outer"> <div id="inner"> <h1>A Column</h1> <kbd>#inner {<br/> float:left;<br/> width:26%;<br/> }</kbd> <p>点击下面的链接以改变该列的高�?lt;/p> <ul id="lccont"> <li><a href="javascript:toggleContent('lccont',1)">�~�短</a></li> <li> <a href="javascript:toggleContent('lccont',5)">加长</a> </li><li> <a href="javascript:toggleContent('lccont',10)">再长�?lt;/a></li> <li>�Q�－�Q�－�Q�－�Q?lt;/li> </ul> </div> <h1>Main Content</h1> <p><kbd>#outer <br />{<br /> background-color:#fff;<br /> width:100%; <br /> }</kbd> </p> <p> 点击改变长度 <a href="javascript:toggleContent('mccont',1)">�~�短</a>�Q?lt;a href="javascript:toggleContent('mccont',10)">加长</a> 或�?<a href="javascript:toggleContent('mccont',40)">更长</a>�?lt;/p> <p id="mccont">闭合��动元素�Q�或者叫清除��动�Q�是web标准设计中经�怼�遇到的一个问题，因此�Q�这里我��x�ȝ��一下目前经常用到的几种�Ҏ��Q��ƈ比较一下他们的易用性和适用环境。如果你有更好的�Ҏ��不妨提出来大家一赯��论�?</p> </div> <div id="footer"> From: </div> </body> </html>
[Ctrl+A 全部选择提示�Q�你可先修改部分代码�Q�再按运行]

在这个例子中�Q�最开始由�?#8220;#inner”的高度小�?#8220;#outer”所以不会有问题�Q�但是当你点�?#8220;加长”后你会发�?#8220;#inner”的底边已�l�超��Z��“#outer”的范��_��?#8220;#outer”没有发生改变。这��是我们所提到�?#8220;清除��动�Q�闭合��Q动元素）”或者是“闭合��动”问题

解决办法�Q?/h3>
1�Q�额外标�{�法

�W�一个，也是W3C推荐的方法就是��用额外标�{��办法。这�U�方法就是在内容的末��֢�加一个空的标�{�，典型的做法就是��用类�?/p>

或者��?/p>

�q�种办法通过增加一个HTML元素�q��外部容器撑开。不�q�这个办法会增加额外的标�{��HTML�l�构看�v来不够简�z��?/p>
例二�Q��用空div闭合��动元素

<!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> 清除��动�Q�闭合��Q动元素）例二�Q��用空div清除��动 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #outer { background-color:#999; border:3px solid #666; } #inner { background-color:#ccc; float:left; width:26%; } #inner , #outer p { margin: 5px 5px 5px 10px; } div.clear{ clear:left; } kbd { display:block; background:#fafaff; border:1px solid #b0c0d0; text-indent:0px; } kbd:first-line { color:#c3c; font-weight:bold; text-indent:20px } #footer { clear:both; border:3px solid #333; background-color:#999; margin-top:15px; height:60px; line-height:60px } ul,li,h1 { margin:0;padding:0} </style> <script type="text/javascript"> // <![CDATA[ /* Pixy's filler generator - http://www.pixy.cz/blogg/clanky/css-3col-layout/ / function toggleContent(name,n) { var i,t='',el = document.getElementById(name); if (!el.origCont) el.origCont = el.innerHTML; for (i=0;i<n;i++) t += el.origCont; el.innerHTML = t; } // ]]> </script> </head> <body> <div id="outer"> <div id="inner"> <h1>#inner</h1> <kbd>#inner {<br/> float:left;<br/> width:26%;<br/> }</kbd> <p>点击下面的链接以改变该列的高�?lt;/p> <ul id="lccont"> <li><a href="javascript:toggleContent('lccont',1)">�~�短</a></li> <li> <a href="javascript:toggleContent('lccont',5)">加长</a> </li><li> <a href="javascript:toggleContent('lccont',10)">再长�?lt;/a></li> <li>�Q�－�Q�－�Q�－�Q?lt;/li> </ul> </div> <h1>#outer</h1> <p><kbd>#outer <br />{<br /> background-color:#999;<br /> width:100%; <br /> } div.clear{ clear:left; }</kbd> </p> <p> 点击改变长度 <a href="javascript:toggleContent('mccont',1)">�~�短</a>�Q?lt;a href="javascript:toggleContent('mccont',10)">加长</a> 或�?<a href="javascript:toggleContent('mccont',40)">更长</a>�?lt;/p> <p id="mccont">闭合��动元素�Q�或者叫清除��动�Q�是web标准设计中经�怼�遇到的一个问题，因此�Q�这里我��x�ȝ��一下目前经常用到的几种�Ҏ��Q��ƈ比较一下他们的易用性和适用环境。如果你有更好的�Ҏ��不妨提出来大家一赯��论�?</p> <div class="clear"></div> </div> <div id="footer"> From:</div> </body> </html>
[Ctrl+A 全部选择提示�Q�你可先修改部分代码�Q�再按运行]

P.S. 我发现在Internet Explorer中（无论�?�q�是7�Q?lt;br style="clear:both" />可以清除��动�Q�但是不能闭合��Q动元素，在Firefox中就没有�q�个问题�Q�不知道是什么原因？�Q?/p>
2�Q��用after伪类

使用after伪类和内容声明在指定的现在内�Ҏ��添加新的内宏V��经常的做法��是��d��一�?#8220;�?#8221;�Q�因为它比较��不太引人注意。然后我们再利用它来清除��动�Q�闭合��Q动元素）�Q��ƈ隐藏�q�个内容�Q?/p>
#outer:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;

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

/ �q�段代码只有IE/Win可以看见 \/
CSS 规则
/ �l�束Hack /

上面的代码中有两行注释，其中�W�一行结束时出现了反斜杠�Q�\�Q�，在Mac的Internet Explorer中会认�ؓ注释�q�没有结束，于是�l�箋向下直到�W�一个完事的“/”出现�Q�这中间的所有字�W�都被当作是注释�Q�而IE/Win却也只会把第一行和�W�三行看作是注释�Q�中间的为有效代码。所以这样就区分出来了不同��^��C��的IE了�?/p>
正是��Z��以上原理�Q�在windows的IE 6上的清理��动�Q�可以��用如下代码：

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

例三�Q��?after伪类清理��动

<!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> 清除��动�Q�闭合��Q动元素）例三�Q��?after伪类 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #outer { background-color:#999; border:3px solid #666; } #outer:after { content:"."; display:block; height:0; visibility:hidden; clear:left; } #outer { display:inline-block; } / Holly Hack Begine \/ html #outer { height:1%; } #outer { display:block; } /* End Hack / #inner { background-color:#ccc; float:left; width:26%; } #inner , #outer p { margin: 5px 5px 5px 10px; } kbd { display:block; background:#fafaff; border:1px solid #b0c0d0; text-indent:0px; } kbd:first-line { color:#c3c; font-weight:bold; text-indent:20px } #footer { clear:both; border:3px solid #333; background-color:#999; margin-top:15px; height:60px; line-height:60px } ul,li,h1 { margin:0;padding:0} </style> <script type="text/javascript"> // <![CDATA[ /* Pixy's filler generator - http://www.pixy.cz/blogg/clanky/css-3col-layout/ / function toggleContent(name,n) { var i,t='',el = document.getElementById(name); if (!el.origCont) el.origCont = el.innerHTML; for (i=0;i<n;i++) t += el.origCont; el.innerHTML = t; } // ]]> </script> </head> <body> <div id="outer"> <div id="inner"> <h1>#inner</h1> <kbd>#inner {<br/> float:left;<br/> width:26%;<br/> }</kbd> <p>点击下面的链接以改变该列的高�?lt;/p> <ul id="lccont"> <li><a href="javascript:toggleContent('lccont',1)">�~�短</a></li> <li> <a href="javascript:toggleContent('lccont',5)">加长</a> </li><li> <a href="javascript:toggleContent('lccont',10)">再长�?lt;/a></li> <li>�Q�－�Q�－�Q�－�Q?lt;/li> </ul> </div> <h1>#outer</h1> <p><kbd> #outer:after { content:"."; display:block; height:0; visibility:hidden; clear:left; }<br/> #outer { display:inline-block; }<br/> / Holly Hack Begine \/<br/> html #outer { height:1%; }<br/> #outer { display:block; } /* End Hack / </kbd> </p> <p> 点击改变长度 <a href="javascript:toggleContent('mccont',1)">�~�短</a>�Q?lt;a href="javascript:toggleContent('mccont',10)">加长</a> 或�?<a href="javascript:toggleContent('mccont',40)">更长</a>�?lt;/p> <p id="mccont">闭合��动元素�Q�或者叫清除��动�Q�是web标准设计中经�怼�遇到的一个问题，因此�Q�这里我��x�ȝ��一下目前经常用到的几种�Ҏ��Q��ƈ比较一下他们的易用性和适用环境。如果你有更好的�Ҏ��不妨提出来大家一赯��论�?</p> </div> <div id="footer"> From: </div> </body> </html>
[Ctrl+A 全部选择提示�Q�你可先修改部分代码�Q�再按运行]

P.S. 如果你不考虑 IE6/Mac用户的话你只需要写 html #outer {height:1%;}卛_��?/p>
另外�Q�似乎在Internet Explorer 7中不高display:inline-block也不好��。因此要使用最完整的Hack招数�?/p>
如果你对如何使用CSS 2中的伪类不熟悉的话，推荐你先阅读一�?#8220;�l�说CSS样式选择�W�——CSS 2.1 Selectors�Q?�Q�、（2�Q�、（3�Q?#8221;

3�Q��Q动外部元素，float-in-float

�q�种�Ҏ��很简单，��是�?#8220;#outer”元素也进行��Q动（向左或者向叻I��?/p>
例子

但是�q�种�Ҏ��带来的别外一个问题就是和“#outer”盔R��的下一个元素会受到“#outer”的媄响位�|�会产生变化�Q�所以��用这�U�方法一定要��心。有选择把页面中的所有元素都��动��h��Q�最后��用一个适当的有意义的元素（比如��脚�Q�进行清理��Q动，�q�有助于减少不必要的标记�Q�但是过多的��动会增加布局的难度�?/p>
例四�Q�float-in-float

<!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> 清除��动�Q�闭合��Q动元素）例四�Q�float-in-float </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #outer { float:left; background-color:#999; border:3px solid #666; } #inner { background-color:#ccc; float:left; width:26%; } #inner , #outer p { margin: 5px 5px 5px 10px; } kbd { display:block; background:#fafaff; border:1px solid #b0c0d0; text-indent:0px; } kbd:first-line { color:#c3c; font-weight:bold; text-indent:20px } #footer { clear:both; border:3px solid #333; background-color:#999; margin-top:15px; height:60px; line-height:60px } ul,li,h1 { margin:0;padding:0} </style> <script type="text/javascript"> // <![CDATA[ / Pixy's filler generator - http://www.pixy.cz/blogg/clanky/css-3col-layout/ / function toggleContent(name,n) { var i,t='',el = document.getElementById(name); if (!el.origCont) el.origCont = el.innerHTML; for (i=0;i<n;i++) t += el.origCont; el.innerHTML = t; } // ]]> </script> </head> <body> <div id="outer"> <div id="inner"> <h1>#inner</h1> <kbd>#inner {<br/> float:left;<br/> width:26%;<br/> }</kbd> <p>点击下面的链接以改变该列的高�?lt;/p> <ul id="lccont"> <li><a href="javascript:toggleContent('lccont',1)">�~�短</a></li> <li> <a href="javascript:toggleContent('lccont',5)">加长</a> </li><li> <a href="javascript:toggleContent('lccont',10)">再长�?lt;/a></li> <li>�Q�－�Q�－�Q�－�Q?lt;/li> </ul> </div> <h1>#outer</h1> <p><kbd> #outer {<br/> float:left;<br/> background-color:#999; } </kbd> </p> <p> 点击改变长度 <a href="javascript:toggleContent('mccont',1)">�~�短</a>�Q?lt;a href="javascript:toggleContent('mccont',10)">加长</a> 或�?<a href="javascript:toggleContent('mccont',40)">更长</a>�?lt;/p> <p id="mccont">闭合��动元素�Q�或者叫清除��动�Q�是web标准设计中经�怼�遇到的一个问题，因此�Q�这里我��x�ȝ��一下目前经常用到的几种�Ҏ��Q��ƈ比较一下他们的易用性和适用环境。如果你有更好的�Ҏ��不妨提出来大家一赯��论�?</p> </div> <div id="footer"> From: </div> </body> </html>
[Ctrl+A 全部选择提示�Q�你可先修改部分代码�Q�再按运行]

4�Q�设�|�overflow为hidden或者auto

�?#8220;#outer”的属性overflow��D��|��ؓhidden或者auto同样可以清理��动

�q�种�Ҏ��不需要添加额外的标记。但是��用overflow的时候一定要��心�Q�因为它会浏览器的表现。另外，在Internet Explorer 6中单�U�地讄��overflow为hidden或者auto�q�不能有效清除��Q动（闭合��动元素�Q�，�q�要指定“#outer”的一个维度，卌��么给它指定一个宽度，要么指定一个高度：

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

注意�Q�如果你要在IE5/Mac上��用这�U�方法清除��Q动（闭合��动元素�Q�的话，你就必须讑֮�overflow的属性�ؓ��gؓhidden�?/p>
例五�Q�overflow:hidden

<!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> 清除��动�Q�闭合��Q动元素）例五�Q�overflow:hidden或overflow:auto </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #outer { width:100%; overflow:hidden; background-color:#999; border:3px solid #666; } #inner { background-color:#ccc; float:left; width:26%; } #inner , #outer p { margin: 5px 5px 5px 10px; } kbd { display:block; background:#fafaff; border:1px solid #b0c0d0; text-indent:0px; } kbd:first-line { color:#c3c; font-weight:bold; text-indent:20px } #footer { clear:both; border:3px solid #333; background-color:#999; margin-top:15px; height:60px; line-height:60px } ul,li,h1 { margin:0;padding:0} </style> <script type="text/javascript"> // <![CDATA[ /* Pixy's filler generator - http://www.pixy.cz/blogg/clanky/css-3col-layout/ */ function toggleContent(name,n) { var i,t='',el = document.getElementById(name); if (!el.origCont) el.origCont = el.innerHTML; for (i=0;i<n;i++) t += el.origCont; el.innerHTML = t; } // ]]> </script> </head> <body> <div id="outer"> <div id="inner"> <h1>#inner</h1> <kbd>#inner {<br/> float:left;<br/> width:26%;<br/> }</kbd> <p>点击下面的链接以改变该列的高�?lt;/p> <ul id="lccont"> <li><a href="javascript:toggleContent('lccont',1)">�~�短</a></li> <li> <a href="javascript:toggleContent('lccont',5)">加长</a> </li><li> <a href="javascript:toggleContent('lccont',10)">再长�?lt;/a></li> <li>�Q�－�Q�－�Q�－�Q?lt;/li> </ul> </div> <h1>#outer</h1> <p><kbd> #outer {<br/> overflow:hidden;<br/> width:100%;<br/> background-color:#999; } </kbd> </p> <p> 点击改变长度 <a href="javascript:toggleContent('mccont',1)">�~�短</a>�Q?lt;a href="javascript:toggleContent('mccont',10)">加长</a> 或�?<a href="javascript:toggleContent('mccont',40)">更长</a>�?lt;/p> <p id="mccont">闭合��动元素�Q�或者叫清除��动�Q�是web标准设计中经�怼�遇到的一个问题，因此�Q�这里我��x�ȝ��一下目前经常用到的几种�Ҏ��Q��ƈ比较一下他们的易用性和适用环境。如果你有更好的�Ҏ��不妨提出来大家一赯��论�?</p> </div> <div id="footer"> From:</div> </body> </html>
[Ctrl+A 全部选择提示�Q�你可先修改部分代码�Q�再按运行]

比较与选择

四种�Ҏ��中��用哪�U�最好呢�Q�首先，不推荐��用after伪类�Q�对比其它三�U�方法，holly招数有点太烦琐，不好掌握�Q�我上面讲到的holly招数中�ƈ不仅仅是IE/Win上有问题�Q�当出现:hover时还会有其它问题�Q�所以我们又加上了inline-block�{�属性，也就是说�q�种�Ҏ��存在更多的不��定性。推荐对代码�?#8220;�z�癖”�q�且技术较高的��Z��用�?br />     那么其它三种�Ҏ��其实都可以考虑�?/p>
不过使用overflow的时候，可能会对��面表现带来影响�Q�而且�q�种影响是不��定的，你最好是能在多个��览器上��试你的��面�Q?/p>
而对于��用额外标�{�清除��Q动（闭合��动元素�Q�，是W3C推荐的做法。至于��?lt;br />元素�q�是�I?lt;div>
可以�Ҏ��自己的喜好来选（当然你也可以使用其它块��元素�Q�。不�q�要注意的是�Q?lt;br />本��n是有表现的，它会多出一个换行出来，所以要讑֮�它的heigh�?�Q�以隐藏它的表现。所以大多数情况下��用空
比较合适�?/p>
float-in-float�Q�也是一个很好的选择�Q�把你要�q�行清理��动的元素外层再加上一�?lt;div>�q�设�|�属性fload:left卛_��Q�不�q�要注意盔R��元素的变化�?/p>

DreamFight 2010-03-09 10:22 发表评论

firefox margin-top失效的原因与解决办法

DreamFight — Mon, 10 Aug 2009 13:38:00 GMT

最�q�发现好多用margin-top实现的，上边距效果一直没有，一直都不知道什么原因，今天偶然看到了，特分享给大家
��Z��么要��译�q�篇说明�Q�css2本有人已��译�q�，但看一下，很粗�p�（不是说自己就怎么怎么样啊�Q�翻译者真的是很值得敬佩的！�Q�，�q�来跟css与xhtml接触得越来越多，但接触得��多�Q�迷惑却��M��见少�?
现在我觉得很多问题根本不能称之�ؓ问题�Q�原因就在于我们的草率理解，比如杀鸡用牛刀�Q�不是不可以�Q�是不合理、不恰当�Q�根源错了，表象也就会错了，如果解决问题从表象入手，隑օ��M��怸�着头脑�Q�还是那句话�Q�要脚踏实地�Q�切莫��Q�w��?
在这个说明中�Q?#8220;collapsing margins”�Q�折叠margin�Q�的意思是�Q?个或以上盒模型之��_��关系可以是相��L��嵌套�Q�相�ȝ��margin属性（�q�之间不能有非空内容�?padding区域、border�Ҏ��或��用清除分��L��法）�l�合表示��Z��个单独的margin�?
在css2.1中，水��^的margin不会被折叠�?
垂直margin可能在一些盒模型中被折叠�Q?
1、在常规文档��中�Q?个或以上的块�U�盒模型盔R��的垂直margin会被折叠�?
最�l�的margin��D��方法如下：
a、全部都为正��|��取最大者；
b、不全是正��|��则都取绝对��|��然后用正值减��L��大��|��
c、没有正��|��则都取绝对��|��然后�?减去最大倹{�?
注意�Q�相�ȝ��盒模型可能由DOM元素动态��生�ƈ没有盔R��或��承关�p�R�?
2、相�ȝ��和模型中�Q�如果其中的一个是��动的（floated�Q�，垂直margin不会被折叠，甚至一个��Q动的盒模型和它的子元素之间也是这栗��?
3、设�|�了overflow属性的元素和它的子元素之间的margin不会被折叠（overflow取��gؓvisible除外�Q��?
4、设�|�了�l�对定位�Q�position:absolute�Q�的盒模型，垂直margin不会被折叠，甚至和他们的子元素之间也是一栗��?
5、设�|�了display:inline-block的元素，垂直margin不会被折叠，甚至和他们的子元素之间也是一栗��?
6、如果一个盒模型的上下margin盔R��Q�这时它的margin可能折叠覆盖�Q�collapse through�Q�它。在�q�种情况下，元素的位�|�（position�Q�取决于它的盔R��元素的margin是否被折叠�?
a、如果元素的margin和它的父元素的margin-top折叠在一��P��盒模型border-top的边界定义和它的父元素相同�?
b、另外，��L��元素的父元素不参与margin的折叠，或者说只有父元素的margin-bottom是参与计��的。如果元素的border-top非零�Q�那么元素的border-top边界位置和原来一栗��?
一个应用了清除操作的元素的margin-top�l�不会和它的块��父元素的margin-bottom折叠�?
注意�Q�那些已�l�被折叠覆盖的元素的位置对其他已�l�被折叠的元素的位置没有��M��影响�Q�只有在对这些元素的子元素布局�Ӟ��border-top边界位置才是必需的�?
7、根元素的垂直margin不会被折叠�?
��动的块�U�元素的margin-bottom��L��与它后面的��Q动块�U�兄弟元素（floated next in-flow block-level sibling�Q�的margin-top盔R��Q�除非那个同�U�元素��用了清除操作�?
��动的块�U�元素的margin-top和它的第一个��Q动块�U�子元素�Q�floated first in-flow block-level child�Q�的margin-top盔R��Q�如果该元素没有border-top�Q�没有padding-top�Q��ƈ且子元素没有使用清除操作�Q��?
��动的块�U�元素的margin-bottom如果�W�合下列条�g�Q�那么它和它的最后一个��Q动块�U�子元素的margin-bottom盔R��Q�如果该元素没有指定padding-bottom或border�Q�：
a、指定了height:auto
b、min-height��于元素的实际��用高度（height�Q?
c、max-height大于元素的实际��用高度（height�Q?
如果一个元素的min-height属性设�|��ؓ0�Q�那么它所拥有的margin是相�ȝ��Q��ƈ且它既没有border-top和border- bottom�Q�也没有padding-top和padding-bottom�Q�它的height属性可以是0或auto�Q�它不能包含一个内联的盒模型（line box�Q�，它所有的��动子元素（如果有的话）的margin也都是相�ȝ��?
当一个元素拥有的margin折叠了，�q�且它��用了清除操作�Q�那么它的margin-top会和紧随其后的兄弟元素的盔R��margin折叠�Q�但�l�果是它的margin��无法和其块�U�父元素的margin-bottom折叠�?
折叠操作是以padding、margin、border的��gؓ基础的（卛_��览器解析所有这些��g��后）�Q�折叠后的margin计算��覆盖已使用的不同margin的倹{�?
[复制此代码]CODE:

//不加入br�q�一行，在FIREFOX中id1的margin-top:20px��会在d0上作用，使d0上方与body间有20px的间�?d1与d0的上�Ҏ��有间距，而IE内正常显�C?

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