亚洲成色WWW久久网站,亚洲美女又黄又爽在线观看,中文字幕久久亚洲一区

忆风 — Wed, 10 Dec 2008 01:53:00 GMT

使用 line-height 垂直居中

line-height:24px;

使用固定宽度的容器�ƈ且需要一行垂直居中时�Q��?line-height 卛_��Q�高度与父层容器一��_��Q�更多的垂直居中�ȝ��可以看这里�?/p>

清除容器��动

#main {
overflow:hidden;
}

期前也提到过�q�样的问题，更多信息可以看这里�?/p>

不让链接折行

a {
white-space:nowrap;
}

上面的设定就能避免链接折行，不过个�h��镉K��接会有相应的�q�行�Q�有��x��行方面的讨论�Q�参看圆心的记录�Q��?/p>

始终�?Firefox 昄��滚动�?/strong>

html {
    overflow:-moz-scrollbars-vertical;
}

更多�?Mozilla/Firefox �U�有 CSS 属性可以参考这里。需跨浏览器的支持，也可以��?/p>
body, html {
    min-height:101%;
}

使块元素水��^居中

margin:0 auto;

其实��是

margin-left: auto;
margin-right: auto;

�q�个技巧基本上所有的 CSS 教科书都会有说明�Q�别忘记�l�它加上个宽度。Exploer 下也可以使用

body{
    text-align: center;
}

然后定义内层容器

text-align: left;

恢复�?/p>
隐藏 Exploer textarea 的滚动条

textarea {
    overflow:auto;
}

Exploer 默认情况�?textarea 会有垂直滚动条（不要问我��Z��么）�?/p>
讄��打印分页

h2 {
    page-break-before:always;
}

page-break-before 属性能讄��打印�|�页时的分页�?/p>
删除链接上的虚线�?/strong>

a:active, a:focus {
    outline:none;
}

Firefox 默认会在链接获得焦点�Q�或者点��L��Q�加上条虚线框，使用上面的属性可以删除�?/p>
最��单的 CSS 重置

* {
   margin: 0; padding: 0
}

忆风 2008-12-10 09:53 发表评论

忆风 — Wed, 10 Dec 2008 01:51:00 GMT

一、��用STYLE属性： ��STYLE属性直接加在个别的元�g标签里�?
<元�g(标签) STYLE="性质(属�?1: 讑֮��?; 性质(属�?2: 讑֮��?; ...}
例如�Q?

�q�种用法的优�? 是可灵��y应用样式於各标签中，但是�~�点则是没有整篇文�g的『统一性』�?br />
二、��用STYLE标签�Q? ��样式规则写�?lt;STYLE>...标签之中�?

例如�Q?

通常是将整个�? �l�构写在�|�页�?lt;HEAD> 部䆾之中。这�U�用法的优点��是在於整篇文�g的统一性，只要是有声明的的元�g即会套用该样式规则。缺点就是在个别元�g的灵�z�d��不��?br />
三、��? LINK标签�Q?��样式规则写�?css的样式��案中�Q�再�?lt;LINK>标签引入�?
假设我们把样式规则存成一个example.css的档案，我们只要在网��中加入

卛_��套用该样式��案中所制定好的样式了�? 通常是将LINK标签写在�|�页�?lt;head>部䆾之中。这�U�用法的优点��是在於可以把要套用相同样式规则的数��文仉��指定到同一个样式��案即可。缺点也是在个别文�g或元件的灉|��度不��?

四、��用@import引入�Q?跟LINK用法很像�Q�但必　攑֜� 中�?

例如�Q?

要注意的是，行末的分��h��l�对不可��的�Q?/strong>

忆风 2008-12-10 09:51 发表评论

CSS兼容IE6,IE7,FIREFOX

忆风 — Wed, 10 Dec 2008 01:49:00 GMT

�|�友们在�~�辑�|�站时常遇到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解决�Ҏ��和大家分享：

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�就垂直居中了。缺�Ҏ��要控制内容不要换�?br /> 7.cursor: pointer 可以同时�?IE FF 中显�C�游标手指状�Q?hand �?IE 可以
8.FF: 链接加边框和背景�Ԍ��需讄�� display: block, 同时讄�� float: left 保证不换行。参�?menubar, �l?a �?menubar 讄��高度是�ؓ了避免底�Ҏ��C�错�? 若不�?height, 可以�?menubar 中插入一个空根{�?br /> 9.在mozilla firefox和IE中的BOX模型解释不一致导致相�?px解决�Ҏ��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 /> 解决�Ҏ��是在�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�网��兼�Ҏ��更差了�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 />

�W�三�U�css filter的办法，以下为经�总�国外�|�站��译�q�来的�?

新徏一个css样式如下�Q?/p>
#item {
width: 200px;
height: 200px;
background: red;
}
新徏一个div,�q��用前面定义的css的样式：

some text here

在body表现�q�里加入lang属�?中文为zh�Q?/p>

现在对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�个东西了�?
我们都知道，��览器在昄��|�页的时候，都会�Ҏ��|�页的css样式表来军_��如何昄��Q�但是我们在样式表中未必会将所有的元素都进行了具体的描�q�ͼ��? 然也没有必要那么做，所以对于那些没有描�q�的属性，��览器将采用内置默认的方式来�q�行昄��Q�譬如文字，如果你没有在css中指定颜�Ԍ��那么��览器将采用�? 色或者系�l�颜色来昄��Q�div或者其他元素的背景�Q�如果在css中没有被指定�Q�浏览器则将其设�|��ؓ白色或者透明�Q�等�{�其他未定义的样式均如此。所以有很多东西出现FF和IE昄��不一��L��Ҏ��原因在于它们的默认显�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��所以这��是�Ҏ�� 原因.当然,我上面的定义肯定昄��不太��观,�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后面做一个统一的背�?譬如:

,比如我们要将page的背景设�|�成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉�?而page居然保存高度不变,问题来了,原因在于page不是float属�?而我们的page�׃��要居�?不能讄��? float,所以我们应该这栯��?lt;div id=”page”>

,再嵌入一个float left而宽度是100%的DIV解决�?

1, !important
随着IE7�?important的支�? !important �Ҏ��现在只针对IE6的HACK.(注意写法.记得该声明位�|�需要提�?)

2, IE6/IE77对FireFox

*+html �?*html 是IE�Ҏ��的标�{? firefox 暂不支持.�?+html 又�ؓ IE7�Ҏ��标签.

注意:
*+html 对IE7的HACK 必须保证HTML�剙��有如下声明：

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

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
��以下代码加入Global CSS �?�l�需要闭合的div加上 class=”clearfix” 卛_��,屡试不爽.

三、其他兼�Ҏ��?再次啰嗦)

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元素的特�Ҏ��:��L��在新行上开�?高度,宽度,行高,边距都可以控�?块元�?;Inline元素的特�Ҏ��:和其他元素在同一行上,…不可控制(内嵌元素);

#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下面�Ҏ��{�于没有讄��宽度和高度�?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> 攑ֈ� 标签下，然后为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代码

9 属性选择�?�q�个不能��是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}
�q�个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别�?子选择器的范围从�Ş式来说羃��了,属性选择器的范围比较�?如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 /> 例：

p对象中的内容

CSS�Q?box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决�Ҏ��Q�在P对象上下各加2个空的div对象CSS代码�Q?1{height:0px;overflow:hidden;}或者�ؓDIV加上border属性�?/p>

忆风 2008-12-10 09:49 发表评论

忆风 — Wed, 19 Nov 2008 05:18:00 GMT

使用 line-height 垂直居中

line-height:24px;

使用固定宽度的容器�ƈ且需要一行垂直居中时�Q��?line-height 卛_��Q�高度与父层容器一��_��Q�更多的垂直居中�ȝ��可以看这里�?/p>
清除容器��动

#main {
    overflow:hidden;
}

期前也提到过�q�样的问题，更多信息可以看这里�?/p>
不让链接折行

a {
    white-space:nowrap;
}

上面的设定就能避免链接折行，不过个�h��镉K��接会有相应的�q�行�Q�有��x��行方面的讨论�Q�参看圆心的记录�Q��?/p>
始终�?Firefox 昄��滚动�?/strong>

html {
    overflow:-moz-scrollbars-vertical;
}

更多�?Mozilla/Firefox �U�有 CSS 属性可以参考这里。需跨浏览器的支持，也可以��?/p>
body, html {
    min-height:101%;
}

使块元素水��^居中

margin:0 auto;

其实��是

margin-left: auto;
margin-right: auto;

�q�个技巧基本上所有的 CSS 教科书都会有说明�Q�别忘记�l�它加上个宽度。Exploer 下也可以使用

body{
    text-align: center;
}

然后定义内层容器

text-align: left;

恢复�?/p>
隐藏 Exploer textarea 的滚动条

textarea {
    overflow:auto;
}

Exploer 默认情况�?textarea 会有垂直滚动条（不要问我��Z��么）�?/p>
讄��打印分页

h2 {
    page-break-before:always;
}

page-break-before 属性能讄��打印�|�页时的分页�?/p>
删除链接上的虚线�?/strong>

a:active, a:focus {
    outline:none;
}

Firefox 默认会在链接获得焦点�Q�或者点��L��Q�加上条虚线框，使用上面的属性可以删除�?/p>
最��单的 CSS 重置

* {
   margin: 0; padding: 0
}

如果�?#8220;复杂”�Q�参考YUI 的做法（�q�有�q�里�Q�。原文留�a�中也有用戯��了他们的观点

I have to agree with Niall Doherty, * {margin: 0px; padding: 0px;}
basically means "traverse every css element and give it these
attributes". That is a very unnecessary strain on the server and
a bad semantic practice, as you have to give some elements
padding/margin again, after stripping them.

忆风 2008-11-19 13:18 发表评论

IE与Firefox的CSS兼容问题

忆风 — Sat, 27 Sep 2008 16:13:00 GMT
CSS�Ҏ��览器器的兼容性具有很高的价��|��通常情况下IE和Firefox存在很大的解析差异，�q�里介绍一下兼容要炏V�?br />
　　常见兼容问题�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�就垂直居中了。缺�Ҏ��要控制内容不要换�?br />
　　7.cursor: pointer 可以同时�?IE FF 中显�C�游标手指状�Q?hand �?IE 可以

　　8.FF: 链接加边框和背景�Ԍ��需讄�� display: block, 同时讄�� float: left 保证不换行。参�?menubar, �l?a �?menubar 讄��高度是�ؓ了避免底�Ҏ��C�错�? 若不�?height, 可以�?menubar 中插入一个空根{�?br />
　　9.在mozilla firefox和IE中的BOX模型解释不一致导致相�?px解决�Ҏ��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 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加倍的问题�?br />
　　讄��为float的div在ie下设�|�的margin会加倍。这是一个ie6都存在的bug�?br /> 　　解决�Ҏ��是在�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�句攄��在另一句之上，上面已经提过

忆风 2008-09-28 00:13 发表评论

css教程–十步学会用css建站(�?

忆风 — Tue, 02 Sep 2008 09:45:00 GMT

目录�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�九步：��D��条的制作(较难)�Q?/a>

�W�十步：解决IE��览器的昄��BUG�Q?/a>

地址

忆风 2008-09-02 17:45 发表评论