ï»??xml version="1.0" encoding="utf-8" standalone="yes"?>国产乱码精品一区二区三区亚洲人 ,一区二区三区在线观看视频,av成人福利http://www.aygfsteel.com/yifeng/category/34314.html光是知道是不够的åQŒå¿…™å»è¦åŠ ä»¥åº”用åQ›å…‰æ˜¯å¸Œæœ›æ˜¯ä¸å¤Ÿçš„，非去做不可ã€?/description>zh-cnWed, 10 Dec 2008 07:06:05 GMTWed, 10 Dec 2008 07:06:05 GMT60几个¾lå…¸çš„css技å·?/title><link>http://www.aygfsteel.com/yifeng/archive/2008/12/10/245410.html</link><dc:creator>忆风</dc:creator><author>忆风</author><pubDate>Wed, 10 Dec 2008 01:53:00 GMT</pubDate><guid>http://www.aygfsteel.com/yifeng/archive/2008/12/10/245410.html</guid><wfw:comment>http://www.aygfsteel.com/yifeng/comments/245410.html</wfw:comment><comments>http://www.aygfsteel.com/yifeng/archive/2008/12/10/245410.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.aygfsteel.com/yifeng/comments/commentRss/245410.html</wfw:commentRss><trackback:ping>http://www.aygfsteel.com/yifeng/services/trackbacks/245410.html</trackback:ping><description><![CDATA[<p><strong>使用 line-height 垂直居中</strong></p> <p><span id="wmqeeuq" class="code">line-height:24px;</span></p> <p>使用固定宽度的容器åƈ且需要一行垂直居中时åQŒä‹Éç”?line-height 卛_¯åQˆé«˜åº¦ä¸Žçˆ¶å±‚容器一è‡ß_¼‰åQŒæ›´å¤šçš„垂直居中æ€È»“可以看这里ã€?/p> <p><strong>清除容器‹¹®åŠ¨</strong></p> <p><span id="wmqeeuq" class="code">#main {<br />     overflow:hidden;<br /> }</span></p> <p>期前也提到过˜q™æ ·çš„问题，更多信息可以看这里ã€?/p> <p><strong>不让链接折行</strong></p> <p><span id="wmqeeuq" class="code">a {<br />     white-space:nowrap;<br /> }</span></p> <p>上面的设定就能避免链接折行，不过个ähå»ø™®®é•‰K“¾æŽ¥ä¼šæœ‰ç›¸åº”çš„˜q™è¡ŒåQˆæœ‰å…Ïx¢è¡Œæ–¹é¢çš„讨论åQŒå‚看圆心的记录åQ‰ã€?/p> <p><strong>始终è®?Firefox 昄¡¤ºæ»šåŠ¨æ?/strong></p> <p><span id="wmqeeuq" class="code">html {<br />     overflow:-moz-scrollbars-vertical;<br /> }</span></p> <p>更多çš?Mozilla/Firefox ¿Uæœ‰ CSS 属性可以参考这里。需跨浏览器的支持，也可以ä‹Éç”?/p> <p><span id="wmqeeuq" class="code">body, html {<br />     min-height:101%;<br /> }</span></p> <p><strong>使块元素水åã^居中</strong></p> <p><span id="wmqeeuq" class="code">margin:0 auto;</span></p> <p>其实ž®±æ˜¯</p> <p><span id="wmqeeuq" class="code">margin-left: auto;<br /> margin-right: auto;</span></p> <p>˜q™ä¸ªæŠ€å·§åŸºæœ¬ä¸Šæ‰€æœ‰çš„ CSS 教科书都会有说明åQŒåˆ«å¿˜è®°¾l™å®ƒåŠ ä¸Šä¸ªå®½åº¦ã€‚Exploer 下也可以使用</p> <p><span id="wmqeeuq" class="code">body{<br />     text-align: center;<br /> }</span></p> <p>然后定义内层容器</p> <p><span id="wmqeeuq" class="code">text-align: left;</span></p> <p>恢复ã€?/p> <p><strong>隐藏 Exploer textarea 的滚动条</strong></p> <p><span id="wmqeeuq" class="code">textarea {<br />     overflow:auto;<br /> }</span></p> <p>Exploer 默认情况ä¸?textarea 会有垂直滚动条（不要问我ä¸ÞZ»€ä¹ˆï¼‰ã€?/p> <p><strong>讄¡½®æ‰“印分页</strong></p> <p><span id="wmqeeuq" class="code">h2 {<br />     page-break-before:always;<br /> }</span></p> <p>page-break-before 属性能讄¡½®æ‰“印¾|‘页时的分页ã€?/p> <p><strong>删除链接上的虚线æ¡?/strong></p> <p><span id="wmqeeuq" class="code">a:active, a:focus {<br />     outline:none;<br /> }</span></p> <p>Firefox 默认会在链接获得焦点åQˆæˆ–者点å‡ÀL—¶åQ‰åŠ ä¸Šæ¡è™šçº¿æ¡†ï¼Œä½¿ç”¨ä¸Šé¢çš„属性可以删除ã€?/p> <p><strong>最½Ž€å•çš„ CSS 重置</strong></p> <p><span id="wmqeeuq" class="code">* {<br />    margin: 0; padding: 0<br /> }</span></p> <img src ="http://www.aygfsteel.com/yifeng/aggbug/245410.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/yifeng/" target="_blank">忆风</a> 2008-12-10 09:53 <a href="http://www.aygfsteel.com/yifeng/archive/2008/12/10/245410.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>引入样式è¡?css)çš„å››¿Uæ–¹å¼?/title><link>http://www.aygfsteel.com/yifeng/archive/2008/12/10/245409.html</link><dc:creator>忆风</dc:creator><author>忆风</author><pubDate>Wed, 10 Dec 2008 01:51:00 GMT</pubDate><guid>http://www.aygfsteel.com/yifeng/archive/2008/12/10/245409.html</guid><wfw:comment>http://www.aygfsteel.com/yifeng/comments/245409.html</wfw:comment><comments>http://www.aygfsteel.com/yifeng/archive/2008/12/10/245409.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.aygfsteel.com/yifeng/comments/commentRss/245409.html</wfw:commentRss><trackback:ping>http://www.aygfsteel.com/yifeng/services/trackbacks/245409.html</trackback:ping><description><![CDATA[<p><strong>一、ä‹É用STYLE属性： ž®†STYLE属性直接加在个别的元äšg标签里ã€?<br /> <å…ƒäšg(标签) STYLE="性质(属æ€?1: 讑֮šå€?; 性质(属æ€?2: 讑֮šå€?; ...}<br /> 例如åQ?<br /> <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷ä½?; line-height:150%><br /> ˜q™ç§ç”¨æ³•çš„优ç‚? 是可灵åéy应用样式於各标签中，但是¾~ºç‚¹åˆ™æ˜¯æ²¡æœ‰æ•´ç¯‡æ–‡äšg的『统一性』ã€?br /> <br /> 二、ä‹É用STYLE标签åQ? ž®†æ ·å¼è§„则写åœ?lt;STYLE>...</STYLE>标签之中ã€?<br /> <STYLE TYPE="text/css"><br /> <!--<br /> 样式规则è¡?br /> --> <br /> </STYLE><br /> 例如åQ? <br /> <STYLE TYPE="text/css"><br /> <!--<br /> BODY {<br /> 　　color: BLUE;<br /> 　　background: #FFFFCC;<br /> 　　font-size: 9pt}<br /> TD, P {<br /> 　　COLOR: GREEN;<br /> 　　font-size: 9pt}<br /> --><br /> </STYLE><br /> 通常是将整个çš? <STYLE>...</STYLE>¾l“构写在¾|‘页çš?lt;HEAD> </HEAD>部䆾之中。这¿Uç”¨æ³•çš„优点ž®±æ˜¯åœ¨æ–¼æ•´ç¯‡æ–‡äšg的统一性，只要是有声明的的元äšg即会套用该样式规则。缺点就是在个别元äšg的灵‹zÕdº¦ä¸èƒöã€?br /> <br /> 三、ä‹Éç”? LINK标签åQ?ž®†æ ·å¼è§„则写åœ?css的样式档案中åQŒå†ä»?lt;LINK>标签引入ã€? <br /> 假设我们把样式规则存成一个example.css的档案，我们只要在网™åµä¸­åŠ å…¥<br /> <LINK REL=STYLESHEET TYPE="text/css" HREF="example.css"><br /> 卛_¯å¥—用该样式档案中所制定好的样式了ã€? 通常是将LINK标签写在¾|‘页çš?lt;head></head>部䆾之中。这¿Uç”¨æ³•çš„优点ž®±æ˜¯åœ¨æ–¼å¯ä»¥æŠŠè¦å¥—用相同样式规则的数½‹‡æ–‡ä»‰™ƒ½æŒ‡å®šåˆ°åŒä¸€ä¸ªæ ·å¼æ¡£æ¡ˆå³å¯ã€‚缺点也是在个别文äšg或元件的灉|´»åº¦ä¸­‘Ÿë€? <br /> <br /> <br /> 四、ä‹É用@import引入åQ?è·ŸLINK用法很像åQŒä½†å¿…　攑֜¨<STYLE>...</STYLE> 中ã€? <br /> <STYLE TYPE="text/css"><br /> <!--<br /> 　　@import url(引入的样式表的位址、èµ\径与档名);<br /> --><br /> </STYLE> <br /> 例如åQ?<br /> <STYLE TYPE="text/css"><br /> <!--<br /> 　　@import url(http://yourweb/ example.css);<br /> --><br /> </STYLE><br /> 要注意的是，行末的分åäh˜¯¾lå¯¹ä¸å¯ž®‘çš„åQ?/strong></p> <img src ="http://www.aygfsteel.com/yifeng/aggbug/245409.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/yifeng/" target="_blank">忆风</a> 2008-12-10 09:51 <a href="http://www.aygfsteel.com/yifeng/archive/2008/12/10/245409.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>CSS兼容IE6,IE7,FIREFOXhttp://www.aygfsteel.com/yifeng/archive/2008/12/10/245408.html忆风忆风Wed, 10 Dec 2008 01:49:00 GMThttp://www.aygfsteel.com/yifeng/archive/2008/12/10/245408.htmlhttp://www.aygfsteel.com/yifeng/comments/245408.htmlhttp://www.aygfsteel.com/yifeng/archive/2008/12/10/245408.html#Feedback0http://www.aygfsteel.com/yifeng/comments/commentRss/245408.htmlhttp://www.aygfsteel.com/yifeng/services/trackbacks/245408.html¾|‘友们在¾~–辑¾|‘站时常遇到CSS兼容的问题，目前‹¹è§ˆå™¨ä‹É用统è®?Browser %)

  • Internet Explorer 48.64
  • Firefox 43.43
  • Safari 3.67
  • Opera 3.31
  • Mozilla 0.65
  • Konqueror 0.14
  • Mozilla compatible agent 0.06
  • Netscape 0.04
  • Camino 0.03
  • not set 0.01
å› æ­¤åQŒäؓ了ä‹É‹¹è§ˆæ›´åŠ ™åºç•…其制作的¾|‘页ž®±åº”考虑到兼容的重要性！现整理了一下兼容的BUG解决æ–ÒŽ(gu¨©)³•å’Œå¤§å®¶åˆ†äº«ï¼š

 

1.DOCTYPE 影响 CSS 处理
2.FF: div 讄¡½® margin-left, margin-right ä¸?auto 时已¾lå±…ä¸? IE 不行
3.FF: body 讄¡½® text-align æ—? div 需要设¾|?margin: auto(主要æ˜? margin-left,margin-right) 方可居中
4.FF: 讄¡½® padding å? div 会增åŠ?height å’?width, ä½? IE 不会, 故需要用 !important 多设一ä¸?height å’?width
5.FF: 支持 !important, IE 则忽ç•? 可用 !important ä¸?FF 特别讄¡½®æ ·å¼
6.div 的垂直居中问é¢? vertical-align:middle; ž®†è¡Œè·å¢žåŠ åˆ°å’Œæ•´ä¸ªDIV一样高 line-height:200px; 然后插入文字åQŒå°±åž‚直居中了。缺ç‚ÒŽ(gu¨©)˜¯è¦æŽ§åˆ¶å†…容不要换è¡?br /> 7.cursor: pointer 可以同时åœ?IE FF 中显½Cºæ¸¸æ ‡æ‰‹æŒ‡çŠ¶åQ?hand ä»?IE 可以
8.FF: 链接加边框和背景è‰ÔŒ¼Œéœ€è®„¡½® display: block, 同时讄¡½® float: left 保证不换行。参ç…?menubar, ¾l?a å’?menubar 讄¡½®é«˜åº¦æ˜¯äؓ了避免底è¾ÒŽ(gu¨©)˜¾½Cºé”™ä½? 若不è®?height, 可以åœ?menubar 中插入一个空根{€?br /> 9.在mozilla firefoxå’ŒIE中的BOX模型解释不一致导致相å·?px解决æ–ÒŽ(gu¨©)³•åQ? div{margin:30px!important;margin:28px;}注意˜q™ä¸¤ä¸ªmargin的顺序一定不能写反，据阿æïLš„说法! important˜q™ä¸ªå±žæ€§IE不能识别åQŒä½†åˆ«çš„‹¹è§ˆå™¨å¯ä»¥è¯†åˆ«ã€‚所以在IE下其实解释成˜q™æ ·åQ? div{maring:30px;margin:28px}重复定义的话按照最后一个来执行åQŒæ‰€ä»¥ä¸å¯ä»¥åªå†™margin:XXpx! important;
10.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;}ž®Þpƒ½è§£å†³å¤§éƒ¨åˆ†é—®é¢?br />
注意事项åQ?br /> 1、floatçš„div一定要闭合ã€?br /> 例如åQ?其中floatA、floatB的属性已¾lè®¾¾|®äØ“float:left;) <#div id=”floatA” >
<#div id=”floatB” >
<#div id=”NOTfloatC” >˜q™é‡Œçš„NOTfloatCòq¶ä¸å¸Œæœ›¾l§ç®‹òq³ç§»åQŒè€Œæ˜¯å¸Œæœ›å¾€ä¸‹æŽ’ã€?br /> ˜q™æ®µä»£ç åœ¨IE中毫无问题，问题出在FF。原因是NOTfloatCòq‰™žfloat标签åQŒå¿…™åÕd°†float标签闭合ã€?br /> åœ? <#div class=”floatB”>
<#div class=”NOTfloatC”>之间加上 <#div class=”clear”>˜q™ä¸ªdiv一定要注意声明位置åQŒä¸€å®šè¦æ”‘Öœ¨æœ€æ°å½“的地方，而且必须与两个具有float属性的div同çñ”åQŒä¹‹é—´ä¸èƒ½å­˜ 在嵌套关¾p»ï¼Œå¦åˆ™ä¼šäñ”生异常ã€?br /> òq¶ä¸”ž®†clear˜q™ç§æ ·å¼å®šä¹‰ä¸ÞZؓ如下卛_¯åQ? .clear{
clear:both;}此外åQŒäؓ了让高度能自动适应åQŒè¦åœ¨wrapper里面加上overflow:hidden;
当包含floatçš„box的时候，高度自动适应在IE下无效，˜q™æ—¶å€™åº”该触发IEçš„layout¿Uæœ‰å±žæ€?万恶的IE啊！)用zoom:1;可以做到åQŒè¿™æ ·å°±è¾‘Öˆ°äº†å…¼å®V€?br /> 例如某一个wrapper如下定义åQ? .colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
2、margin加倍的问题
讄¡½®ä¸ºfloatçš„div在ie下设¾|®çš„margin会加倍。这是一个ie6都存在的bugã€?br /> 解决æ–ÒŽ(gu¨©)¡ˆæ˜¯åœ¨˜q™ä¸ªdiv里面加上display:inline;
例如åQ?br /> <#div id=”imfloat”>
相应的css�br /> #IamFloat{
float:left;
margin:5px;/*IE下理解äØ“10px*/
display:inline;/*IE下再理解�px*/}
3、关于容器的包涵关系
很多时候，ž®¤å…¶æ˜¯å®¹å™¨å†…有åã^行布局åQŒä¾‹å¦‚两、三个floatçš„divæ—Óž¼Œå®½åº¦å¾ˆå®¹æ˜“出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素¾U§çš„¾_‘Öº¦ã€?br /> 4、关于高度的问题
如果是动态地æ·ÕdŠ å†…容åQŒé«˜åº¦æœ€å¥½ä¸è¦å®šä¹‰ã€‚浏览器可以自动伸羃åQŒç„¶è€Œå¦‚果是静态的内容åQŒé«˜åº¦æœ€å¥½å®šå¥½ã€‚（ä¼ég¹Žæœ‰æ—¶å€™ä¸ä¼šè‡ªåŠ¨å¾€ä¸‹æ’‘å¼€åQŒä¸çŸ¥é“具体怎么回事åQ?br /> 5、最狠的手段 - !important;
如果实在没有办法解决一些细节问é¢?可以用这个方æ³?FF对于”!important”会自动优先解æž?然而IE则会忽略.如下 .tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}值得注意的是åQŒä¸€å®šè¦ž®†xxxx !important ˜q™å¥æ”„¡½®åœ¨å¦ä¸€å¥ä¹‹ä¸Šï¼Œä¸Šé¢å·²ç»æè¿‡
IE7.0出来了，对CSS的支持又有新问题。浏览器多了åQŒç½‘™åµå…¼å®ÒŽ(gu¨©)€§æ›´å·®äº†åQŒç–²äºŽå¥”命的˜q˜æ˜¯æˆ‘们 åQŒäؓ解决IE7.0的兼定w—®é¢˜ï¼Œæ‰¾æ¥äº†ä¸‹é¢è¿™½‹‡æ–‡ç« ï¼š
现在我大部分都是ç”?important来hackåQŒå¯¹äºŽie6å’Œfirefox‹¹‹è¯•å¯ä»¥æ­£å¸¸æ˜„¡¤ºåQŒä½†æ˜¯ie7å¯?important可以正确解释åQŒä¼šå¯? 致页面没按要求显½Cºï¼æœçƒ¦äº†ä¸€ä¸‹ï¼Œæ‰‘Öˆ°ä¸€ä¸ªé’ˆå¯¹IE7不错的hack方式ž®±æ˜¯ä½¿ç”¨“*+html”åQŒçŽ°åœ¨ç”¨IE7‹¹è§ˆä¸€ä¸‹ï¼Œåº”该没有问题了ã€?br /> 现在写一个CSS可以˜q™æ ·åQ?br /> #example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
那么在firefox下字体颜色显½CÞZØ“#333åQŒIE6下字体颜色显½CÞZØ“#666åQŒIE7下字体颜色显½CÞZØ“#999.

 

CSS兼容IE6,IE7,FIREFOX的一些收�/h2>
½W¬ä¸€¿Uï¼Œæ˜¯CSS HACKçš„æ–¹æ³?

height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/

注意™åºåºã€?/p>

˜q™æ ·ä¹Ÿå±žäºŽCSS HACKåQŒä¸˜q‡æ²¡æœ‰ä¸Šé¢è¿™æ ïL®€‹zã€?br /> #example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

½W¬äºŒ¿Uæ˜¯ä½¿ç”¨IE专用的条件注é‡?br /> <!–其他‹¹è§ˆå™?–>
<link rel=”stylesheet” type=”text/css” href=”css.css” />

<!–[if IE 7]>
<!– 适合于IE7 –>
<link rel=”stylesheet” type=”text/css” href=”ie7.css” />
<![endif]–>

<!–[if lte IE 6]>
<!– 适合于IE6及一ä¸?–>
<link rel=”stylesheet” type=”text/css” href=”ie.css” />
<![endif]–>

½W¬ä¸‰¿Ucss filter的办法，以下为经å…总Žå›½å¤–¾|‘ç«™¾˜»è¯‘˜q‡æ¥çš„ã€?

新徏一个css样式如下åQ?/p>

#item {
width: 200px;
height: 200px;
background: red;
}
新徏一个div,òq¶ä‹É用前面定义的css的样式：

<div id=”item”>some text here</div>

在body表现˜q™é‡ŒåŠ å…¥lang属æ€?中文为zhåQ?/p>

<body lang=”en”>

现在对div元素再定义一个样式：

*:lang(en) #item{
background:green !important;
}

˜q™æ ·åšæ˜¯ä¸ÞZº†ç”?important覆盖原来的css样式,ç”׃ºŽ:lang选择器ie7.0òq¶ä¸æ”¯æŒ,所以对˜q™å¥è¯ä¸ä¼šæœ‰ä»ÖM½•ä½œç”¨,于是也达åˆîCº†ie6.0下同æ ïLš„效果,但是很不òq¸åœ°çš„是,safari同样不支持此属æ€?所以需要加入以下css样式åQ?/p>

#item:empty {
background: green !important
}
:empty选择器äØ“css3的规èŒ?ž®½ç®¡safariòq¶ä¸æ”¯æŒæ­¤è§„èŒ?但是˜q˜æ˜¯ä¼šé€‰æ‹©æ­¤å…ƒç´?不管是否此元素存åœ?现在¾l¿è‰²ä¼šçŽ°åœ¨åœ¨é™¤ie各版本以外的‹¹è§ˆå™¨ä¸Šã€?/p>

对IE6和FF的兼容可以考虑以前�important

个äh比较喜欢用第一¿Uï¼Œ½Ž€‹zï¼Œå…¼å®¹æ€§æ¯”较好ã€?/p>

或许你一直在抱怨äؓ什么要专门为IEå’ŒFF写不同的CSSåQŒäؓ什么IE˜q™æ ·è®©äh头疼åQŒç„¶åŽä¸€è¾¹å†™cssåQŒä¸€è¾¹å’’骂那个可恶的M$ IE.其实对于css的标准支持方面，IEòq¶æ²¡æœ‰æˆ‘们想象的那么可恶åQŒå…³é”®åœ¨äºŽIEå’ŒFF的默认å€ég¸ä¸€æ ¯‚€Œå·²åQŒæŽŒæ¡äº†˜q™ä¸ªæŠ€å·§ï¼Œä½ ä¼šå‘现写出兼容FFå’? IEçš„cssòq¶ä¸æ˜¯é‚£ä¹ˆå›°éš¾ï¼Œæˆ–许对于½Ž€å•çš„cssåQŒä½ å®Œå…¨å¯ä»¥ä¸ç”¨”!important”˜q™ä¸ªä¸œè¥¿äº†ã€?

我们都知道，‹¹è§ˆå™¨åœ¨æ˜„¡¤º¾|‘页的时候，都会æ ÒŽ(gu¨©)®¾|‘页的css样式表来军_®šå¦‚何昄¡¤ºåQŒä½†æ˜¯æˆ‘们在样式表中未必会将所有的元素都进行了具体的描˜qŽÍ¼Œå½? 然也没有必要那么做，所以对于那些没有描˜q°çš„属性，‹¹è§ˆå™¨å°†é‡‡ç”¨å†…置默认的方式来˜q›è¡Œæ˜„¡¤ºåQŒè­¬å¦‚文字，如果你没有在css中指定颜è‰ÔŒ¼Œé‚£ä¹ˆ‹¹è§ˆå™¨å°†é‡‡ç”¨é»? 色或者系¾lŸé¢œè‰²æ¥æ˜„¡¤ºåQŒdiv或者其他元素的背景åQŒå¦‚果在css中没有被指定åQŒæµè§ˆå™¨åˆ™å°†å…¶è®¾¾|®äؓ白色或者透明åQŒç­‰½{‰å…¶ä»–未定义的样式均如此。所以有很多 东西出现FFå’ŒIE昄¡¤ºä¸ä¸€æ ïLš„æ ÒŽ(gu¨©)œ¬åŽŸå› åœ¨äºŽå®ƒä»¬çš„默认显½CÞZ¸ä¸€æ øP¼Œè€Œè¿™ä¸ªé»˜è®¤æ ·å¼è¯¥å¦‚何昄¡¤ºæˆ‘知道在w3中有没有对应的标准来˜q›è¡Œè§„定åQŒå› æ­¤å¯¹äºŽè¿™ç‚¹ä¹Ÿ ž®±åˆ«åŽÀL€ªç½ªIE了。所以解军_Šžæ³•å°±å‡ºæ¥äº†ï¼Œé‚£å°±æ˜¯å¯¹äºŽä¸¾lŸä¸€çš„默认显½Cºæ–¹å¼ï¼Œåœ¨css中给指定具体数值就可以了，下面我将ž®±æˆ‘知道的默认标½{¾æ¥˜q›è¡Œè¯´æ˜Žã€?/p>

列表标签UL LIåQŒè¿™ä¸ªæ˜¯æœ‹å‹æŠ±æ€¨å¾—最多的标签åQŒè¯´æ¯æ¬¡é‡åˆ°˜q™ä¸ªæ ‡ç­¾çš„时候IEå’ŒFFæ€ÀL˜¯æ˜„¡¤ºä¸ä¸€è‡´ã€‚è¡ŒåQŒæ—¢ç„¶å¦‚此，你何不在样式表中ž®†è¿™ä¸ªæ ‡½{„¡š„属性给定义了，å¦? ul{padding:0;margin:0;}åQŒç„¶åŽå†çœ‹çœ‹åQŒæ˜¯ä¸æ˜¯ä¸€è‡´äº†åQŸå¯¹äºŽul标签åQŒIE会自动羃˜q›å‡ ä¸ªåƒç´ ï¼Œè€ŒFF则不是这æ øP¼Œæ‰€ä»¥è¿™ž®±æ˜¯æ ÒŽ(gu¨©)œ¬ 原因.当然,我上面的定义肯定昄¡¤ºä¸å¤ª¾ŸŽè§‚,˜q™ä¸ªæ—¶å€™ä½ å¯ä»¥æ‰‹åŠ¨˜q›è¡Œè°ƒèŠ‚,譬如调节æˆ?{padding:0;margin:0 0 0 10px;list-style-position: inside;},所以今后对于这个标½{?只要你发现IEå’ŒFF不一è‡?ž®±åŽ»çœ‹çœ‹å¯¹åº”çš„css有哪些属æ€?然后˜q›è¡Œå¤¸å¼ çš„描˜q?用IEå’ŒFireFoxæŸ? 看之,如果一致则有效.FORM标签,˜q™ä¸ªæ ‡ç­¾åœ¨IEä¸?ž®†ä¼šè‡ªåŠ¨margin一些边è·?而在FF中margin则是0,å› æ­¤,如果æƒÏx˜¾½CÞZ¸€è‡?所以最å¥? 在css中指定marginå’Œpadding,针对上面两个问题,我的css中一般首先都使用˜q™æ ·çš„样式ul,form{margin:0; padding:0;}¾l™å®šä¹‰æ­»äº?所以后面就不会ä¸ø™¿™ä¸ªå¤´ç–égº†.

关于更多默认å€ég¸åŒçš„标签,希望大家¾l§ç®‹å‘掘,希望此文能抛砖引çŽ?

下面的问题不是默认值的问题�

对于排版,我们用得最多的css描述可能ž®±æ˜¯float:left.有的时候我们需要在n栏的float div后面做一个统一的背æ™?譬如:<div id=”page”> <div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div>,比如我们要将page的背景设¾|®æˆè“è‰²,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉é•?而page居然保存高度不变,问题来了,原因在于page不是float属æ€?而我们的pageç”׃ºŽè¦å±…ä¸?不能讄¡½®æˆ? float,所以我们应该这栯‚§£å†?lt;div id=”page”> <div id=”bg” style=”float:left;width:100%”><div id=”left”></div> <div id=”center”></div> <div id=”right”></div> </div></div>,再嵌入一个float left而宽度是100%çš„DIV解决ä¹?

1, !important

随着IE7å¯?important的支æŒ? !important æ–ÒŽ(gu¨©)³•çŽ°åœ¨åªé’ˆå¯¹IE6çš„HACK.(注意写法.记得该声明位¾|®éœ€è¦æå‰?)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>

2, IE6/IE77对FireFox

*+html ä¸?*html 是IEç‰ÒŽ(gu¨©)œ‰çš„æ ‡½{? firefox 暂不支持.è€?+html 又äØ“ IE7ç‰ÒŽ(gu¨©)œ‰æ ‡ç­¾.
<style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意™åºåº */
}
</style>

注意:
*+html 对IE7çš„HACK 必须保证HTML™å‰™ƒ¨æœ‰å¦‚下声明：
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”　”http://www.w3.org/TR/html4/loose.dtd”>

二、万�float 闭合(非常重要!)

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
ž®†ä»¥ä¸‹ä»£ç åŠ å…¥Global CSS ä¸?¾l™éœ€è¦é—­åˆçš„div加上 class=”clearfix” 卛_¯,屡试不爽.
<style>
/* Clear Fix */

.clearfix:after
{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

三、其他兼å®ÒŽ(gu¨©)Š€å·?再次啰嗦)

1, FF下给 div 讄¡½® padding 后会å¯ÆD‡´ width å’?height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.ž®?line-height 讄¡½®ä¸?当前 div 相同的高åº? 再通过 vertical-align: middle.( 注意内容不要换行.)
2).æ°´åã^居中. margin: 0 auto;(当然不是万能)
3, 若需¾l?a 标签内内容加ä¸?样式, 需要设¾|? display: block;(常见于导航标½{?
4, FF �IE �BOX 理解的差异导致相�2px 的还有设�float的div在ie� margin加倍等问题.
5, ul 标签åœ?FF 下面默认æœ?list-style å’?padding . 最好事先声æ˜? 以避免不必要的麻çƒ? (常见于导航标½{‘Ö’Œå†…容列表)
6, 作äؓ外部 wrapper çš?div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手åŞ光标. cursor: pointer. 而hand 只适用äº?IE.

1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hackåQŒå¯¹äºŽie6å’Œfirefox‹¹‹è¯•å¯ä»¥æ­£å¸¸æ˜„¡¤ºåQ?br /> 但是ie7å¯?important可以正确解释åQŒä¼šå¯ÆD‡´™åµé¢æ²¡æŒ‰è¦æ±‚昄¡¤ºåQæ‰¾åˆîC¸€ä¸ªé’ˆ
对IE7不错的hack方式ž®±æ˜¯ä½¿ç”¨“*+html”åQŒçŽ°åœ¨ç”¨IE7‹¹è§ˆä¸€ä¸‹ï¼Œåº”该没有问题了ã€?br /> 现在写一个CSS可以˜q™æ ·åQ?/p>

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显½CÞZØ“#333åQŒIE6下字体颜色显½CÞZØ“#666åQŒIE7下字体颜色显½CÞZØ“#999ã€?/p>

2 css布局中的居中问题
主要的样式定义如下：

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明åQ?br /> 首先在父¾U§å…ƒç´ å®šä¹‰TEXT-ALIGN: center;˜q™ä¸ªçš„意思就是在父çñ”元素内的内容居中åQ›å¯¹äºŽIE˜q™æ ·è®‘Ö®šž®±å·²¾lå¯ä»¥äº†ã€?br /> 但在mozilla中不能居中。解军_Šžæ³•å°±æ˜¯åœ¨å­å…ƒç´ å®šä¹‰æ—¶å€™è®¾å®šæ—¶å†åŠ ä¸?#8220;MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法ä‹É整个™åµé¢è¦å±…中，å»ø™®®ä¸è¦å¥—在一个DIV里，你可以依‹Æ¡æ‹†å‡ºå¤šä¸ªdivåQ?br /> 只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ž®±å¯ä»¥äº†ã€?/p>

3 盒模型不同解�

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

4 ‹¹®åŠ¨ie产生的双倍距¼›?/p>

#box{ float:left; width:100px; margin:0 0 0 100px; //˜q™ç§æƒ…况之下IE会äñ”ç”?00px的距¼›? display:inline; //使æÕQ动忽略}
˜q™é‡Œ¾l†è¯´ä¸€ä¸‹block,inline两个元素,Block元素的特ç‚ÒŽ(gu¨©)˜¯:æ€ÀL˜¯åœ¨æ–°è¡Œä¸Šå¼€å§?高度,宽度,行高,边距都可以控åˆ?块元ç´?;Inline元素的特ç‚ÒŽ(gu¨©)˜¯:和其他元素在同一行上,…不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟äؓ块元ç´?display:inline; //实现同一行排列的的效æž? diplay:table;

5 IE与宽度和高度的问�/p>

IE不认得min-˜q™ä¸ªå®šä¹‰åQŒä½†å®žé™…上它把正常的widthå’Œheight当作有min的情冉|¥ä½Ñ€‚这样问题就大了åQŒå¦‚果只用宽度和高度åQ?br /> 正常的浏览器里这两个值就不会变，如果只用min-widthå’Œmin-height的话åQŒIE下面æ ÒŽ(gu¨©)œ¬½{‰äºŽæ²¡æœ‰è®„¡½®å®½åº¦å’Œé«˜åº¦ã€?br /> 比如要设¾|®èƒŒæ™¯å›¾ç‰‡ï¼Œ˜q™ä¸ªå®½åº¦æ˜¯æ¯”较重要的。要解决˜q™ä¸ªé—®é¢˜åQŒå¯ä»¥è¿™æ øP¼š
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 ™åµé¢çš„最ž®å®½åº?/p>

min-width是个非常方便的CSS命ä×oåQŒå®ƒå¯ä»¥æŒ‡å®šå…ƒç´ æœ€ž®ä¹Ÿä¸èƒ½ž®äºŽæŸä¸ªå®½åº¦åQŒè¿™æ ·å°±èƒ½ä¿è¯æŽ’版一直正¼‹®ã€‚但IE不认得这个，
而它实际上把width当做最ž®å®½åº¦æ¥ä½Ñ€‚äؓ了让˜q™ä¸€å‘½ä×o在IE上也能用åQŒå¯ä»¥æŠŠä¸€ä¸?lt;div> 攑ֈ° <body> 标签下，然后为div指定一个类åQ?br /> 然后CSS˜q™æ ·è®¾è®¡åQ?br /> #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? “600px”: “auto” );}
½W¬ä¸€ä¸ªmin-width是正常的åQ›ä½†½W?行的width使用了JavascriptåQŒè¿™åªæœ‰IE才认得，˜q™ä¹Ÿä¼šè®©ä½ çš„HTML文档不太正规。它实际上通过Javascript的判断来实现最ž®å®½åº¦ã€?/p>

7 清除‹¹®åŠ¨

.hackbox{ display:table; //ž®†å¯¹è±¡ä½œä¸ºå—元素¾U§çš„表格昄¡¤º}或è€?hackbox{ clear:both;}
或者加å…?afteråQˆä¼ªå¯¹è±¡åQ?讄¡½®åœ¨å¯¹è±¡åŽå‘生的内容，通常和content配合使用åQŒIE不支持此伪对象，非Ie ‹¹è§ˆå™¨æ”¯æŒï¼Œ
所以åƈ不媄响到IE/WIN‹¹è§ˆå™¨ã€‚è¿™¿Uçš„最éºÈƒ¦çš?#8230;…#box:after{ content: “.”; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV‹¹®åŠ¨IE文本产生3象素的bug

左边对象‹¹®åŠ¨åQŒå³è¾šw‡‡ç”¨å¤–补丁的左边距来定位，双™¾¹å¯¹è±¡å†…的文本会离左边æœ?pxçš„é—´è·?

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //˜q™å¥æ˜¯å…³é”®}
HTML代码<div id=”box”> <div id=”left”></div> <div id=”right”></div></div>

9 属性选择å™?˜q™ä¸ªä¸èƒ½½Ž—是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}
˜q™ä¸ªå¯¹äºŽIE6.0å’ŒIE6.0以下的版本都隐藏,FFå’ŒOPera作用
属性选择器和子选择器还是有区别çš?子选择器的范围从åŞ式来说羃?y¨­u)®äº?属性选择器的范围比较å¤?如p[id]ä¸?所有p标签中有id的都是同样式çš?

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接，DIV½{‰è¿™ä¸ªæ—¶å€™å®¹æ˜“发生捉˜q¯‚—çš„问题ã€?br /> 有些内容昄¡¤ºä¸å‡ºæ¥ï¼Œå½“鼠标选择˜q™ä¸ªåŒºåŸŸæ˜¯å‘现内容确实在™åµé¢ã€?br /> 解决办法åQšå¯¹#layout使用line-height属æ€? 或者给#layout使用固定高和宽。页面结构尽量简单ã€?/p>

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动˜q›è¡Œè°ƒèŠ‚åQŒç‰¹åˆ«æ˜¯å½“内层对象ä‹Éç”?br /> margin 或paddign æ—¶ã€?br /> 例：
<div id=”box”>
<p>p对象中的内容</p>
</div>
CSSåQ?box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决æ–ÒŽ(gu¨©)³•åQšåœ¨P对象上下各加2个空的div对象CSS代码åQ?1{height:0px;overflow:hidden;}或者äØ“DIV加上border属性ã€?/p>



]]>几个¾lå…¸çš„css技å·?/title><link>http://www.aygfsteel.com/yifeng/archive/2008/11/19/241331.html</link><dc:creator>忆风</dc:creator><author>忆风</author><pubDate>Wed, 19 Nov 2008 05:18:00 GMT</pubDate><guid>http://www.aygfsteel.com/yifeng/archive/2008/11/19/241331.html</guid><wfw:comment>http://www.aygfsteel.com/yifeng/comments/241331.html</wfw:comment><comments>http://www.aygfsteel.com/yifeng/archive/2008/11/19/241331.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.aygfsteel.com/yifeng/comments/commentRss/241331.html</wfw:commentRss><trackback:ping>http://www.aygfsteel.com/yifeng/services/trackbacks/241331.html</trackback:ping><description><![CDATA[<span style="color: #202020; font-family: 宋体; font-size: 14px; line-height: 25px; "> <p><strong>使用 line-height 垂直居中</strong></p> <p><span id="wmqeeuq" class="code">line-height:24px;</span></p> <p>使用固定宽度的容器åƈ且需要一行垂直居中时åQŒä‹Éç”?line-height 卛_¯åQˆé«˜åº¦ä¸Žçˆ¶å±‚容器一è‡ß_¼‰åQŒæ›´å¤šçš„垂直居中æ€È»“可以看这里ã€?/p> <p><strong>清除容器‹¹®åŠ¨</strong></p> <p><span id="wmqeeuq" class="code">#main {<br />     overflow:hidden;<br /> }</span></p> <p>期前也提到过˜q™æ ·çš„问题，更多信息可以看这里ã€?/p> <p><strong>不让链接折行</strong></p> <p><span id="wmqeeuq" class="code">a {<br />     white-space:nowrap;<br /> }</span></p> <p>上面的设定就能避免链接折行，不过个ähå»ø™®®é•‰K“¾æŽ¥ä¼šæœ‰ç›¸åº”çš„˜q™è¡ŒåQˆæœ‰å…Ïx¢è¡Œæ–¹é¢çš„讨论åQŒå‚看圆心的记录åQ‰ã€?/p> <p><strong>始终è®?Firefox 昄¡¤ºæ»šåŠ¨æ?/strong></p> <p><span id="wmqeeuq" class="code">html {<br />     overflow:-moz-scrollbars-vertical;<br /> }</span></p> <p>更多çš?Mozilla/Firefox ¿Uæœ‰ CSS 属性可以参考这里。需跨浏览器的支持，也可以ä‹Éç”?/p> <p><span id="wmqeeuq" class="code">body, html {<br />     min-height:101%;<br /> }</span></p> <p><strong>使块元素水åã^居中</strong></p> <p><span id="wmqeeuq" class="code">margin:0 auto;</span></p> <p>其实ž®±æ˜¯</p> <p><span id="wmqeeuq" class="code">margin-left: auto;<br /> margin-right: auto;</span></p> <p>˜q™ä¸ªæŠ€å·§åŸºæœ¬ä¸Šæ‰€æœ‰çš„ CSS 教科书都会有说明åQŒåˆ«å¿˜è®°¾l™å®ƒåŠ ä¸Šä¸ªå®½åº¦ã€‚Exploer 下也可以使用</p> <p><span id="wmqeeuq" class="code">body{<br />     text-align: center;<br /> }</span></p> <p>然后定义内层容器</p> <p><span id="wmqeeuq" class="code">text-align: left;</span></p> <p>恢复ã€?/p> <p><strong>隐藏 Exploer textarea 的滚动条</strong></p> <p><span id="wmqeeuq" class="code">textarea {<br />     overflow:auto;<br /> }</span></p> <p>Exploer 默认情况ä¸?textarea 会有垂直滚动条（不要问我ä¸ÞZ»€ä¹ˆï¼‰ã€?/p> <p><strong>讄¡½®æ‰“印分页</strong></p> <p><span id="wmqeeuq" class="code">h2 {<br />     page-break-before:always;<br /> }</span></p> <p>page-break-before 属性能讄¡½®æ‰“印¾|‘页时的分页ã€?/p> <p><strong>删除链接上的虚线æ¡?/strong></p> <p><span id="wmqeeuq" class="code">a:active, a:focus {<br />     outline:none;<br /> }</span></p> <p>Firefox 默认会在链接获得焦点åQˆæˆ–者点å‡ÀL—¶åQ‰åŠ ä¸Šæ¡è™šçº¿æ¡†ï¼Œä½¿ç”¨ä¸Šé¢çš„属性可以删除ã€?/p> <p><strong>最½Ž€å•çš„ CSS 重置</strong></p> <p><span id="wmqeeuq" class="code">* {<br />    margin: 0; padding: 0<br /> }</span></p> <p>如果æƒ?#8220;复杂”åQŒå‚考YUI 的做法（˜q˜æœ‰˜q™é‡ŒåQ‰ã€‚原文留­a€ä¸­ä¹Ÿæœ‰ç”¨æˆ¯‚¯´äº†ä»–们的观点</p> <p><span id="wmqeeuq" class="code">I have to agree with Niall Doherty, * {margin: 0px; padding: 0px;}<br /> basically means "traverse every css element and give it these <br /> attributes". That is a very unnecessary strain on the server and <br /> a bad semantic practice, as you have to give some elements <br /> padding/margin again, after stripping them.</span></p> </span> <img src ="http://www.aygfsteel.com/yifeng/aggbug/241331.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.aygfsteel.com/yifeng/" target="_blank">忆风</a> 2008-11-19 13:18 <a href="http://www.aygfsteel.com/yifeng/archive/2008/11/19/241331.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item><item><title>IE与Firefoxçš„CSS兼容问题 http://www.aygfsteel.com/yifeng/archive/2008/09/28/231588.html忆风忆风Sat, 27 Sep 2008 16:13:00 GMThttp://www.aygfsteel.com/yifeng/archive/2008/09/28/231588.htmlhttp://www.aygfsteel.com/yifeng/comments/231588.htmlhttp://www.aygfsteel.com/yifeng/archive/2008/09/28/231588.html#Feedback0http://www.aygfsteel.com/yifeng/comments/commentRss/231588.htmlhttp://www.aygfsteel.com/yifeng/services/trackbacks/231588.html
　　常见兼容问题åQ?/span>

　　1.DOCTYPE 影响 CSS 处理

　　2.FF: div 讄¡½® margin-left, margin-right ä¸?auto 时已¾lå±…ä¸? IE 不行

　　3.FF: body 讄¡½® text-align æ—? div 需要设¾|?margin: auto(主要æ˜?margin-left,margin-right) 方可居中

　　4.FF: 讄¡½® padding å? div 会增åŠ?height å’?width, ä½?IE 不会, 故需要用 !important 多设一ä¸?height å’?width

　　5.FF: 支持 !important, IE 则忽ç•? 可用 !important ä¸?FF 特别讄¡½®æ ·å¼

　　6.div 的垂直居中问é¢? vertical-align:middle; ž®†è¡Œè·å¢žåŠ åˆ°å’Œæ•´ä¸ªDIV一样高 line-height:200px; 然后插入文字åQŒå°±åž‚直居中了。缺ç‚ÒŽ(gu¨©)˜¯è¦æŽ§åˆ¶å†…容不要换è¡?br />
　　7.cursor: pointer 可以同时åœ?IE FF 中显½Cºæ¸¸æ ‡æ‰‹æŒ‡çŠ¶åQ?hand ä»?IE 可以

　　8.FF: 链接加边框和背景è‰ÔŒ¼Œéœ€è®„¡½® display: block, 同时讄¡½® float: left 保证不换行。参ç…?menubar, ¾l?a å’?menubar 讄¡½®é«˜åº¦æ˜¯äؓ了避免底è¾ÒŽ(gu¨©)˜¾½Cºé”™ä½? 若不è®?height, 可以åœ?menubar 中插入一个空根{€?br />
　　9.在mozilla firefoxå’ŒIE中的BOX模型解释不一致导致相å·?px解决æ–ÒŽ(gu¨©)³•åQ?
div{margin:30px!important;margin:28px;}
　　注意˜q™ä¸¤ä¸ªmargin的顺序一定不能写反，据阿æïLš„说法!important˜q™ä¸ªå±žæ€§IE不能识别åQŒä½†åˆ«çš„‹¹è§ˆå™¨å¯ä»¥è¯†åˆ«ã€‚所以在IE下其实解释成˜q™æ ·åQ?
div{maring:30px;margin:28px}
　　重复定义的话按照最后一个来执行åQŒæ‰€ä»¥ä¸å¯ä»¥åªå†™margin:XXpx!important;

　　10.IE5 和IE6的BOX解释不一�br /> 　　IE5�
div{width:300px;margin:0 10px 0 10px;}
　　div的宽度会被解释äØ“300px-10px(叛_¡«å…?-10px(左填å…?最¾lˆdiv的宽度äØ“280pxåQŒè€Œåœ¨IE6和其他浏览器上宽度则是以300px+10px(叛_¡«å…?+10px(左填å…?=320px来计½Ž—的。这时我们可以做如下修改
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
　　关于˜q™ä¸ª/**/是什么我也不太明白，只知道IE5å’Œfirefox都支持但IE6不支持，如果有äh理解的话åQŒè¯·å‘Šè¯‰æˆ‘一壎ͼŒè°¢äº†åQï¼šåQ?br />
　　11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
ul{margin:0;padding:0;}
　　ž®Þpƒ½è§£å†³å¤§éƒ¨åˆ†é—®é¢?br />
　　注意事项åQ?/span>

　　1、float的div一定要闭合�br />
　　例如åQ?其中floatA、floatB的属性已¾lè®¾¾|®äØ“float:left;)
<#div id="floatA" ></#div>
<#div id="floatB" ></#div>
<#div id="NOTfloatC" ></#div>
　　˜q™é‡Œçš„NOTfloatCòq¶ä¸å¸Œæœ›¾l§ç®‹òq³ç§»åQŒè€Œæ˜¯å¸Œæœ›å¾€ä¸‹æŽ’ã€?br /> 　　˜q™æ®µä»£ç åœ¨IE中毫无问题，问题出在FF。原因是NOTfloatCòq‰™žfloat标签åQŒå¿…™åÕd°†float标签闭合ã€?br /> 　　åœ?
<#div class="floatB"></#div>
<#div class="NOTfloatC"></#div>
　　之间加上
<#div class="clear"></#div>
　　˜q™ä¸ªdiv一定要注意声明位置åQŒä¸€å®šè¦æ”‘Öœ¨æœ€æ°å½“的地方，而且必须与两个具有float属性的div同çñ”åQŒä¹‹é—´ä¸èƒ½å­˜åœ¨åµŒå¥—å…³¾p»ï¼Œå¦åˆ™ä¼šäñ”生异常ã€?br /> 　　òq¶ä¸”ž®†clear˜q™ç§æ ·å¼å®šä¹‰ä¸ÞZؓ如下卛_¯åQ?
.clear{
clear:both;}
　　此外åQŒäؓ了让高度能自动适应åQŒè¦åœ¨wrapper里面加上overflow:hidden;
　　当包含floatçš„box的时候，高度自动适应在IE下无效，˜q™æ—¶å€™åº”该触发IEçš„layout¿Uæœ‰å±žæ€?万恶的IE啊！)用zoom:1;可以做到åQŒè¿™æ ·å°±è¾‘Öˆ°äº†å…¼å®V€?br /> 　　例如某一个wrapper如下定义åQ?
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}

　　2、margin加倍的问题�br />
　　讄¡½®ä¸ºfloatçš„div在ie下设¾|®çš„margin会加倍。这是一个ie6都存在的bugã€?br /> 　　解决æ–ÒŽ(gu¨©)¡ˆæ˜¯åœ¨˜q™ä¸ªdiv里面加上display:inline;
例如åQ?br />
<#div id="imfloat"></#div>

　　相应的css�br />
#IamFloat{
float:left;
margin:5px;/*IE下理解äØ“10px*/
display:inline;/*IE下再理解�px*/}

　　3、关于容器的包涵关系

　　很多时候，ž®¤å…¶æ˜¯å®¹å™¨å†…有åã^行布局åQŒä¾‹å¦‚两、三个floatçš„divæ—Óž¼Œå®½åº¦å¾ˆå®¹æ˜“出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素¾U§çš„¾_‘Öº¦ã€?br />
　　4、关于高度的问题

　　如果是动态地æ·ÕdŠ å†…容åQŒé«˜åº¦æœ€å¥½ä¸è¦å®šä¹‰ã€‚浏览器可以自动伸羃åQŒç„¶è€Œå¦‚果是静态的内容åQŒé«˜åº¦æœ€å¥½å®šå¥½ã€‚（ä¼ég¹Žæœ‰æ—¶å€™ä¸ä¼šè‡ªåŠ¨å¾€ä¸‹æ’‘å¼€åQŒä¸çŸ¥é“具体怎么回事åQ?br />
　　5、最狠的手段 - !important;

　　如果实在没有办法解决一些细节问�可以用这个方�FF对于"!important"会自动优先解�然而IE则会忽略.如下
.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}

　　值得注意的是åQŒä¸€å®šè¦ž®†xxxx !important ˜q™å¥æ”„¡½®åœ¨å¦ä¸€å¥ä¹‹ä¸Šï¼Œä¸Šé¢å·²ç»æè¿‡

 



]]>css教程–十步学会用css建站(å…?http://www.aygfsteel.com/yifeng/archive/2008/09/02/226455.html忆风忆风Tue, 02 Sep 2008 09:45:00 GMThttp://www.aygfsteel.com/yifeng/archive/2008/09/02/226455.htmlhttp://www.aygfsteel.com/yifeng/comments/226455.htmlhttp://www.aygfsteel.com/yifeng/archive/2008/09/02/226455.html#Feedback0http://www.aygfsteel.com/yifeng/comments/commentRss/226455.htmlhttp://www.aygfsteel.com/yifeng/services/trackbacks/226455.html目录åQ?/strong>

½W¬ä¸€æ­¥ï¼šè§„划¾|‘ç«™åQŒæœ¬æ•™ç¨‹ž®†ä»¥å›„¡¤ºä¸ÞZ¾‹æž„徏¾|‘ç«™åQ?/a>

½W¬äºŒæ­¥ï¼šåˆ›å¾html模板及文件目录等åQ?/a>

½W¬ä¸‰æ­¥ï¼šž®†ç½‘站分ä¸ÞZº”个divåQŒç½‘™åµåŸºæœ¬å¸ƒå±€çš„基¼‹€åQ?/a>

½W¬å››æ­¥ï¼š¾|‘页布局与div‹¹®åŠ¨½{‰ï¼›

½W¬äº”步：¾|‘页主要框架之外的附加结构的布局与表玎ͼ›

½W¬å…­æ­¥ï¼š™åµé¢å†…的基本文本的样å¼?css)讄¡½®åQ?/a>

½W¬ä¸ƒæ­¥ï¼š¾|‘站头部图标与logo部分的设计；

½W¬å…«æ­¥ï¼š™åµè„šä¿¡æ¯(版权½{?的表现设¾|®ï¼›

½W¬ä¹(ji¨¦)步：å¯ÆDˆªæ¡çš„制作(较难)åQ?/a>

½W¬åæ­¥ï¼šè§£å†³IE‹¹è§ˆå™¨çš„昄¡¤ºBUGåQ?/a>



地址

]]> Ö÷Õ¾Ö©Öë³ØÄ£°å£º ËÉÅËÏØ| ×õË®ÏØ| ¾©É½ÏØ| ¹¤²¼½­´ïÏØ| °ÍÁÖÓÒÆì| ÏɾÓÏØ| ÉÌË®ÏØ| ÁùÅÌË®ÊÐ| ÄþÎäÏØ| ÄϲýÏØ| ºþÄÏÊ¡| èϳÇÏØ| èÈÑôÏØ| ãôºéÏØ| ÄþÎäÏØ| ¡×ÓÏØ| ÔúÄÒÏØ| ÃϽòÏØ| ÕżҸÛÊÐ| ÎäÒåÏØ| ͨÖÝÇø| ´Ó»¯ÊÐ| Ã÷Ë®ÏØ| ¿ËÀ­ÂêÒÀÊÐ| Í©è÷ÏØ| °½ººÆì| ¶«Ã÷ÏØ| ÐÂç­ÏØ| ½¹×÷ÊÐ| ÄôÈÙÏØ| ÀÈ·»ÊÐ| Îä¡ÏØ| ÁÖÎ÷ÏØ| ÓÀ´ºÏØ| ÌÚ³åÏØ| ÄôÈÙÏØ| ÄôÀ­Ä¾ÏØ| Î÷ÄþÊÐ| ·áÕòÊÐ| ËÕÄáÌØÓÒÆì| °²ÔÀÏØ|