David1228 — Mon, 30 Aug 2010 03:41:00 GMT

转蝲自：(x��)http://www.div-css.net/div_css/topic/index.asp?id=7633

采用”FLOAT�Q�LEFT“的DIV在IE8、IE7、都没问题，IE6下却向下�U�d��Q�出现空白。这是因为，IE6采用的内栔R��认把DIV之间的距��d��加了3~5个PX�Q�所以，试试是将下移的DIV的STYLE里增�?margin-left:-5px;"或者更��?br /> 解决IE7、IE8样式不兼定w��?/p>

�Ҏ(gu��)��一、要在页面中加入如下HTTP meta-tag:

只要IE8一��d��q�个标签�Q�它?y��u)�׃�?x��)自动启动IE7兼容模式�Q�保证页面完整展�C��?/p>

�Ҏ(gu��)��?/span>、针�Ҏ(gu��)��个网站，在IIS中加入如下描�q�符��可以有相同的效果，当然�q�么做范围更�qѝ�?/p>

解决IE6、IE7、IE8样式不兼定w��?/p>

现在我们在做�|�页的时��L��L��要考虑一些浏览器之间的兼定w��题。近期在做一个短信��^台的��目。在��目的开发过�E�中让我遇到了一件头痛的事情��是IE7与IE8不兼宏V��后面想了许多办法得以解冟뀂现�׃�n如下�Q?/p>

如果你的��面对IE7兼容没有问题�Q�又不想大量修改现有代码�Q�同时又能在IE8中正�怋�用，微��Y声称�Q�开发商仅需要在目前兼容IE7的网站上��d��一行代码即可解决问题，此代码如下：(x��)

CODE:

解决firefox ie6 ie7的css样式兼容问题

做主题最�ȝ��的就是CSS样式兼容问题�Q�由于各��览器对ccs的不同解释，造成本来IE7可正常显�C�，但到了Firefox 、ie6�{�其它浏览器上，却出现错位、下沉等问题�Q�只得在Firefox 、ie6 、ie7之间不停的切换调试，�?#8230;最�q�又有两�ƾ浏览器加入googleChrome和IE8,某个��览器一�l�天下看来是没希望了�Q�只能尽量克服兼定w��题。找��C��解军_��定w��题的文章�Q�还是很有效的�?/p>

1 针对firefox ie6 ie7的CSS样式

现在大部分都是用!important来hack�Q�对于ie6和firefox��试可以正常昄��Q�但是ie7�?important可以正确解释�Q�会(x��)��D��面没按要求昄��Q�找��C��个针对IE7不错的hack方式��是使用“*+html”�Q�现在用IE7��览一下，应该没有问题了现在写一个CSS可以�q�样�Q?/p>

#1 { color: #333; } /* Moz */

* html #1 { color: #666; } /* IE6 */

*+html #1 { color: #999; } /* IE7 */

那么在firefox下字体颜色显�C�Zؓ(f��)#333�Q�IE6下字体颜色显�C�Zؓ(f��)#666�Q�IE7下字体颜色显�C�Zؓ(f��)#999�?/p>

2 css布局中的居中问题

主要的样式定义如下：(x��)

body {TEXT-ALIGN: center;}

#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明�Q?/p>

首先在父�U�元素定义TEXT-ALIGN: center;�q�个的意思就是在父��元素内的内容居中�Q�对于IE�q�样讑֮��已�l�可以了�?/p>

但在mozilla中不能居中。解军_��法就是在子元素定义时候设定时再加�?#8220;MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要说明的是，如果你想用这个方法��整个��面要居中，��不要套在一个DIV里，你可以依�ơ拆出多个div�Q�只要在每个拆出的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�?x��)��?00px的距��?display:inline; //使��Q动忽略}

�q�里�l�说一下block,inline两个元素,Block元素的特�Ҏ(gu��)��:��L��在新行上开�?高度,宽度,行高,边距都可以控�?块元�?;Inline元素的特�Ҏ(gu��)��:和其他元素在同一行上,…不可控制(内嵌元素);

#box{ display:block; //可以为内嵌元素模拟�ؓ(f��)块元�?display:inline; //实现同一行排列的的效�?diplay:table;

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

IE不认得min-�q�个定义�Q�但实际上它把正常的width和height当作有min的情冉|��ѝ��这样问题就大了�Q�如果只用宽度和高度�Q�正常的��览器里�q�两个值就不会(x��)变，如果只用min-width和min-height的话�Q�IE下面�Ҏ(gu��)��{�于没有讄��宽度和高度。比如要讄��背景囄��Q�这个宽度是比较重要的。要解决�q�个问题�Q�可以这��P��(x��)

#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当做最��宽度来�ѝ��ؓ(f��)了让�q�一命��o在IE上也能用�Q�可以把一�?lt;div> 攑ֈ� 标签下，然后为div指定一个类�Q?/p>

然后CSS�q�样设计�Q?/p>

#container{

min-width: 600px;

width:expression(document.body.clientWidth < 600? “600px”: “auto” );

}

�W�一个min-width是正常的�Q�但�W?行的width使用了Javascript�Q�这只有IE才认得，�q�也�?x��)让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最��宽度�?/p>

7 清除��动

.hackbox{

display:table;

//��对象作为块元素�U�的表格昄��

}

或�?/p>

.hackbox{

clear:both;

}

或者加�?after�Q�伪对象�Q?讄��在对象后发生的内容，通常和content配合使用�Q�IE不支持此伪对象，非Ie ��览器支持，所以�ƈ不媄响到IE/WIN��览器。这�U�的最�ȝ��?/p>

……#box:after{

content: “.”;

display: block;

height: 0;

clear: both;

visibility: hidden;

}

8 DIV��动IE文本产生3象素的bug

左边对象��动�Q�右辚w��用外补丁的左边距来定位，双��对象内的文本�?x��)离左边�?px的间�?

#box{

float:left;

width:800px;}

#left{

float:left;

width:50%;}

#right{

width:50%;

}

*html #left{

margin-right:-3px;

//�q�句是关�?/p>

}

HTML代码

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��的问题�?/p>

有些内容昄��不出来，当鼠标选择�q�个区域是发现内容确实在��面�?/p>

解决办法�Q�对#layout使用line-height属�?或者给#layout使用固定高和宽。页面结构尽量简单�?/p>

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动�q�行调节�Q�特别是当内层对象��?/p>

margin 或paddign 时。例�Q?/p>

p对象中的内容

CSS�Q?/p>

#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;}或者�ؓ(f��)DIV加上border属性�?/p>

注：(x��)IE都能识别*;标准��览�?如FF)不能识别*�Q?/p>

IE6能识别_�Q�其他不�?/p>

IE6能识�?�Q�也能识�?!important, 但不能把它识别成优先

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

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

文章来源: Div-Css.net设计�|?参�?http://www.div-css.net/div_css/topic/index.asp?id=7633

David1228 2010-08-30 11:41 发表评论

国产精品男人爽免费视频1,日本精品影院,国产白浆在线免费观看