武汉web培训
达内武汉中心

15827352908

热门课程

武汉web培训:css技巧

  • 时间:2016-05-23 10:30
  • 发布:lizifeixue
  • 来源:web前端网

DIV CSS完美兼容IE6/IE7/FF的通用方法
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
 
1, !important
 
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
 
以下为引用的内容:
<style>
#wrapper
{
width: 100px!important;
width: 80px;
}
</style> 
 
 
2, IE6/IE77对FireFox
 
以下为引用的内容:
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
<style>
#wrapper
{
#wrapper { width: 120px; }
*html #wrapper { width: 80px;}
*+html #wrapper { width: 60px;}
}
</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 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.
 
以下为引用的内容:
<style>
 
.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
.clearfix {display:block;}
</style>
 
 
 
三、其他兼容技巧
 
1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 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,对于ie6和firefox测试可以正常显示,
但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针
对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。
现在写一个CSS可以这样:
 
以下为引用的内容:
#1 { color: #333; }
* html #1 { color: #666; }
*+html #1 { color: #999; }  
 
那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。
 
2 css布局中的居中问题
主要的样式定义如下:
 
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明:
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
 
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产生的双倍距离
 
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);
 
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;
 
IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,
正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
 
6 页面的最小宽度
 
min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个
放到 <body> 标签下,然后为div指定一个类:
然后CSS这样设计:
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
 
7 清除浮动
 
.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}
或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,
所 以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}
 
8 DIV浮动IE文本产生3象素的bug
 
左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
 
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}
HTML代码<div id="box"> <div id="left">
<div id="right">
 
9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
 
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
 
10 IE捉迷藏的问题
 
当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
 
11 高度不适应
 
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用
margin 或paddign 时。
例:
<div id="box">
<p>p对象中的内容</p>
CSS:#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
 
六、CSS兼容要点分析IE vs FF
 
CSS 兼容要点:
 
DOCTYPE 影响 CSS 处理
 
FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
 
FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
 
FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
 
FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
 
div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
 
cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
 
FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集
 
使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的大家四处找^^
 
1、在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
 
div{margin:30px!important;margin:28px;}
 
注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
 
div{maring:30px;margin:28px}
 
重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;
 
2、IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改
 
div{width:300px!important;width :340px;margin:0 10px 0 10px}
 
,关于这个是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)
 
3、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
 
ul{margin:0;padding:0;}
 
就能解决大部分问题
 
4、关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为
 
< type="text/java">
 
就可以了
 
七、10个你未必知道的CSS技巧
 
1、CSS字体属性简写规则
 
一般用CSS设定字体属性是这样做的:
 
以下为引用的内容:
font-weight:bold;
 
font-style:italic;
 
font-varient:small-caps;
 
font-size:1em;
 
line-height:1.5em;
 
font-family:verdana,sans-serif;
 
但也可以把它们全部写到一行上去:
 
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
 
真不错!只有一点要提醒的:这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且,如果你没有设定font-weight, font-style, 以及 font-varient ,他们会使用缺省值,这点要记上。
 
2、同时使用两个类
 
一般只能给一个元素设定一个类(Class),但这并不意味着不能用两个。事实上,你可以这样:
 
<p class="text side">...</p>
 
同时给P元素两个类,中间用空格格开,这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话,后设置的起作用,即在CSS文件中放在后面的类的属性起作用。
 
补充:对于一个ID,不能这样写<p id="text side">...</p>也不能这样写
 
3、CSS border的缺省值
 
通常可以设定边界的颜色,宽度和风格,如:
 
border: 3px solid #000
 
这位把边界显示成3像素宽,黑色,实线。但实际上这里只需要指定风格即可。
 
如果只指定了风格,其他属性就会使用缺省值。一般地,Border的宽度缺省是medium,一般等于3到4个像素;缺省的颜色是其中文字的颜色。如果这个值正好合适的话,就不用设那么多了。
 
4、CSS用于文档打印
 
许多网站上都有一个针对打印的版本,但实际上这并不需要,因为可以用CSS来设定打印风格。
 
也就是说,可以为页面指定两个CSS文件,一个用于屏幕显示,一个用于打印:
 
<link type="text/css" rel="stylesheet" href="/blog/stylesheet.css" media="screen" /> <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />
 
第1行就是显示,第2行是打印,注意其中的media属性。
 
但应该在打印CSS中写什么东西呢?你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片,再关掉一些导航按钮。要想了解更多,可以看“打印差异”这一篇。
 
5、图片替换技巧
 
一般都建议用标准的HTML来显示文字,而不要使用图片,这样不但快,也更具可读性。但如果你想用一些特殊字体时,就只能用图片了。
 
比如你想整个卖东西的图标,你就用了这个图片:
 
<h1><img src="/blog/widget-image.gif" alt="Buy widgets" /></h1>
 
这当然可以,但对搜索引擎来说,和正常文字相比,它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的:
 
<h1>Buy widgets</h1>
 
但这样就没有特殊字体了。要想达到同样效果,可以这样设计CSS:
 
h1 { background: url(/blog/widget-image.gif) no-repeat; height: image height text-indent: -2000px }
 
注意把image height换成真的图片的高度。这里,图片会当作背景显示出来,而真正的文字由于设定了-2000像素这个缩进,它们会出现在屏幕左边2000点的地方,就看不见了。但这对于关闭图片的人来说,可能全部看不到了,这点要注意。
 
6、CSS box模型的另一种调整技巧
 
这个Box模型的调整主要是针对IE6之前的IE浏览器的,它们把边界宽度和空白都算在元素宽度上。比如:
 
#box { width: 100px; border: 5px; padding: 20px }
 
这样调用它:
 
<div id="box">...
 
这时盒子的全宽应该是150点,这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上,它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。
 
但用CSS也可以达到同样的目的,让它们显示效果一致。
 
#box { width: 150px } #box div { border: 5px; padding: 20px }
 
这样调用:
 
<div id="box">
...
 
这样,不管什么浏览器,宽度都是150点了。
 
7、块元素居中对齐
 
如果想做个固定宽度的网页并且想让网页水平居中的话,通常是这样:
 
#content { width: 700px; margin: 0 auto }
 
你会使用 <div id="content"> 来围上所有元素。这很简单,但不够好,IE6之前版本会显示不出这种效果。改CSS如下:
 
body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
 
这会把网页内容都居中,所以在Content中又加入了
 
text-align: left 。
 
8、用CSS来处理垂直对齐
 
垂直对齐用表格可以很方便地实现,设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高,而想让导航文字垂直居中的话,设定这个属性是没用的。
 
CSS方法是什么呢?对了,把这些文字的行高设为 2em:line-height: 2em ,这就可以了。
 
9、CSS在容器内定位
 
CSS的一个好处是可以把一个元素任意定位,在一个容器内也可以。比如对这个容器:
 
#container { position: relative }
 
这样容器内所有的元素都会相对定位,可以这样用:
 
<div id="container"><div id="navigation">...
 
如果想定位到距左30点,距上5点,可以这样:
 
#navigation { position: absolute; left: 30px; top: 5px }
 
当然,你还可以这样:
 
margin: 5px 0 0 30px
 
注意4个数字的顺序是:上、右、下、左。当然,有时候定位的方法而不是边距的方法更好些。
 
10、直通到屏幕底部的背景色
 
在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部,用表格是很方便的,但如果只用这样的CSS:
 
#navigation { background: blue; width: 150px }
 
较短的导航条是不会直通到底部的,半路内容结束时它就结束了。该怎么办呢?
 
不幸的是,只能采用欺骗的手段了,给这较短的一栏加上个背景图,宽度和栏宽一样,并让它的颜色和设定的背景色一样。
 
body { background: url(/blog/blue-image.gif) 0 0 repeat-y }
 
此时不能用em做单位,因为那样的话,一旦读者改变了字体大小,这个花招就会露馅,只能使用px。
 
HTML的SPAN和DIV的区别
SPAN 和 DIV 的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。
 
<span>SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。在此例中,<span>标识符允许你将一个段落分成不同的部分。   还有一个标识符具有类似的功能,
DIV也被用来在HTML文件中建立逻辑部分。但与
SPAN不同,
工作于文本块一级,它在它所包含的HTML元素的前面及后面都引入了行分隔。
 
SPAN标记有一个重要而实用的特性,即它什么事也不会做,它的唯一目的就是围绕你的HTML代码中的其它元素,这样你就可以为它们指定样式了。在此例中,标识符允许你将一个段落分成不同的部分。  还有一个标识符具有类似的功能, DIV也被用来在HTML文件中建立逻辑部分。但与 SPAN不同, 工作于文本块一级,它在它所包含的HTML元素的前面及后面都引入了行分隔。
 
div布局时不能居中、居中失灵的解决
一般情况下,div不能居中,div居中失灵是因为页面没有声明引起的:加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
即可
 
使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。如
.style{margin-left:auto;margin-right:auto;}
缩写形式为:
.style{margin:0 auto;}
数字0 表示上下边距是0。可以按照需要设置成不同的值。
 
查看下面的例子:
 
以下为引用的内容:
<!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" lang="zh-cn">   
<head>   
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />   
<title>居中div演示效果</title>   
<style type="text/css">   
.align-center{    
    margin:0 auto;          
     width:500px;            
     background:red;          
     text-align:center;      
}    
</style>   
</head>   
   
<body>   
<div class="align-center">居中div演示效果
  
</body>   
</html>   
 
 
 
 
注意,需要加上上面的那句
 
才能生效,要是不想要这句的话,也可以给body加一个属性:
body{text-align:center;} 
 
另外,让div内的内容(包括文字及图片)居中的代码是: text-align:center; 
 
解决Flash 在Div中无法居中
以下为引用的内容:
<style>
html,body{ margin:0px; padding:0px; background:url(images/boydBg.gif) repeat-x;}
img{ border:0px; }
#head{ width:1000px; height:364px; text-align:center; }            
#logo{ height:110px; background-color:#0099CC; background:url(images/home01.jpg) repeat-x; text-align:right; padding-right:420px;}
#nav{ height:54px;}
#banner{ width:950px; height:200px; text-align:center;}
 
</style>
</head>
 
<body>
<!-- 顶部开布局 -->
<div id="head">
    <div id="banner"><iframe marginwidth="0" marginheight="0" src="images/banner.swf" frameborder="0" width="950" scrolling="No" height="200"></iframe>
 
#banner{margin:0 auto;}  -----用这个动画是距中了
 
#head{margin:0 auto;}  ------用这个整个页面都距中啦~~
 
FireFox和IE浏览器对于DIV+CSS设计的区别及对策
 
1、实际像素
IE/Opera:对象的实际宽度 = (margin-left) + width + (margin-right)
Firefox/Mozilla:对象的实际宽度= (margin-left) + (border-left-width) + (padding- left) + width + (padding-right) + (border-right-width) + (margin-right)
所以排列好及列的表格时ie和ff显示宽度稍有区别
 
2、水平居中
问题:div里的内容,ie默认为center,而ff默认left
解决:mairgin:0px auto;
 
3、高度问题
问题:如果设置了一个DIV的高度,当DIV里实际内容大于所设高度,ie会自动拉伸以适应DIV容器大小,ff会固定DIV的告诉,超过部分超出DIV底线以外,出现和下面的内容重叠的现象
解决:控制恰当的高度,或者不写,让浏览器自动调节高度,或者设置overflow:hidden;
 
4、clear:both;
问题:如果上面用float控制了n列DIV,下面ie会自动检测自动排列,ff则可能很不老实,到处乱动
解决:float结束后的下一个标签加clear:both;以结束float的控制
 
5、最大/小宽度问题
问题:min-width,max-width只是ff的命令,如何让ie实现同样的效果
解决:ie不认识min-和max-,实际ie认为min-width、max-width和width效果一样,可以用下面方法解决
#cctext{
min-width: 700px;
max-width: 1000px;
width:expression(document.body.clientWidth<700 ? "700px" : document.body.clientWidth>1000 ? "1000px" : "auto");
}
 
6、!important支持
问题:ff支持ie6.0不支持
解决:无。ie会忽略。
 
7、游标状态
问题:cursor:hand;仅ie支持,显示手指状态
解决:使用cursor:pointer;ie和ff都支持
 
8、单位问题
问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外)
解决:写全单位如padding:0px;
以前写的页面都统一width:900px;不存在什么布局呀 什么float的设置。现在没办法呀!要对页面进行切割,分块。幸好,有点css的基础,不过用起来就比较郁闷了。在ie和firefox下,相同的属性值往往会有不同的显示效果。没办法 要兼容浏览器只得一个一个bug去找。但完全兼容浏览器是无法做到的,所以也只能将个大概的效果展示出来,不要偏差太大太明显就行。
首先,需要提出的是float这个浮动属性,这是div+css布局的关键所在。float:left;float:right;是常用的浮动属性。为了使div能在一行排列,不得补用到它们。呵呵!不就是个float吗?这有什么好提的,要浮动我就float一下呀。哎!话是这么说,但真正用到时却出问题了。在ie下,只要前一个div有float:left;后面的div宽度不超过(总body的宽度)-(前一个div的宽度),后面的div就自动浮动,并排列在同一行。ie和firefox下,这点效果是一样。好,接着往下,下一行也这样布局,就分两栏吧。
<style type="text/css">
#div1{}{width:200px;height:80px;float:left;border:1px solid blue;}
#div2{}{width:600px;height:80px;border:1px solid blue;}
</style>
<div id="div1">
<div id="div2">
<div style="clear:both;margin-top:20px;" id="div3">
 
这样的布局,在ie下和火狐下的显示效果就不同了 在firefox下的margin-top:20px;没效果。。。。
                 在ie下div3的margin-top有效果,而在firefox下却没效果。为什么?翻来覆去的想,终究没有想明白。没办法了,后来我有改css.偶然,给div2加上了float:left属性,然后margin-top:20px都有效果了。郁闷吧 呵呵 不过还是没弄明白为什么会这样,问题解决了就ok了!
   下一个问题是ul的问题。在ie下和firefox下注意了 ul{margin-left:10px;}的效果是不同的,这样设置的效果才会相同
ul{padding:0;margin-left:10px;}在火狐下默认的padding!=0所以需要这样来设置下 ...
div+css扩展框问题浮动下降 IE与Firefox兼容性整理2008-08-14 10:57div+css扩展框问题浮动下降 IE与Firefox兼容性整理
图文混排 容易导致扩展框问题.
 
<img src="images/index_1.jpg" />扩展框问题
这样排版容易导致 扩展框问题.
尽量定义宽高给定值
 
* 浮动下降问题[size=+0]
加上 {float:left;} 即可```
IE6的双倍边距BUG
解决办法是加上display:inline
IE6下为什么图片下方有空隙产生
解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block或者设置vertical-align属性为vertical-align:top | bottom |middle |text-bottom都可以解决.
IE6下这两个层中间怎么有间隙
这个IE的3PX BUG也是经常出现的,解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left
如何对齐文本与文本输入筐
遇到此种问题,设置文本框的     vertical-align:middle 就可以了
为什么FF下文本无法撑开容器的高度
[size=+0]
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢?办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
{
height:auto!important;
height:200px;
min-height:200px;
}
 
怎么样才能让层显示在FLASH之上呢
 
解决的办法是给FLASH设置透明<param value="transparent" />或者<param value="opaque" />
 
怎样使一个层垂直居中于浏览器中
 
使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以二.
 
方法二:首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
 
 
{
width:300px;
margin-left:auto;
margin-right:auto;
}
 
针对firefox ie6 ie7的css样式
 
现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,
但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针
对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。
现在写一个CSS可以这样:
 
#1 { color: #333; }
* html #1 { color: #666; }
*+html #1 { color: #999; }
那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。
 
页面的最小宽度
 
min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个
放到 <body> 标签下,然后为div指定一个类:
然后CSS这样设计:
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
 
属性选择器(这个不能算是兼容,是隐藏css的一个bug)
 
p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
 
最狠的手段 - !important;
 
 
 
如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.
关于容器的包涵关系
很多时候,尤其是容器内有平行布局,例如两、三个float的div时,宽度很容易出现问题。在IE中,外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。
 
1.写两句代码来控制一个属性,区别Firefox与IE:
backgroundrange; *background:green;
//这一句代码写出来时,你用Firefox浏览,会发现背景是橙色的,而IE里却是绿色的,很简单,因为Firefox不能识别*,而IE6,IE7都可以识*,标准浏览器(如Firefox,Opera,Netscape)不能识别*;。
2.写两句代码来控制一个属性,区别IE7与IE6:
background:green !important;background:blue;
//这一句代码写出来时,你用IE7浏览,会发现,写了该代码的区域背景是绿色的,如果用IE6浏览,却是蓝色的,这是因为IE7能识别!important*,一但识别了,就执行,忽略了后面的那一句,但IE6却不能识别!important,所以前面部分跳过,直接执行了后半部份.
3.写三句代码来控制一个属性,区别Firefox,IE7,IE6:
backgroundrange;*background:green !important;*background:blue;
//这一句会使在Firefox在,背景呈橙色,IE7中为绿色,IE6中为蓝色,道理和前面一样,Firefox不能识别*,所以后面两句都不执行,直接执行第一句,IE7当然也能执行第一行代码,但是因为第二句,他也能识别,所以就执行了第二句代码,把前面的效果给过滤了,而最后一句,IE7是不能识别的。IE6不能识别!imprtant,本来运行了第一句代码了,第二句不能识别,那就理所当然的执行了最后一句。
注:IE都能识别*;标准浏览器(如Firefox,Opera,Netscape)不能识别*;IE6能识别*,但不能识别 !important,IE7能识别*,也能识别!important;FF不能识别*,但能识别!important;
 
div+css在FireFox里居中的问题。2008-07-15 15:31尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下)。
 
标准浏览器如Mozilla, Opera, Safari等.,可将父级元素显示方式设定为TABLE(display: table;) ,内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中,但非标准浏览器是不支持的。
非标准浏览器只能在子元素里设距顶部50%,里面再套个元素距顶部-50% 来抵消。
 
解决代码如下:
CSS:
body {padding: 0; margin: 0;}body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;}
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;}
div.greenBorder {border: 1px solid green; background-color: ivory;}
 
<div id="outer">
<div id="middle">
<div id="inner" class="greenBorder">
 
以上CSS代码的优点是没有hacks,采用了IE不支持的CSS2选择器#value[id]。
 
CSS2选择器#value[id]相当于选择器#value,但是Internet Explorer不支持这种类型的选择器。同样地.value[class],相当于.value,这些只有标准浏览器能读懂。
 
 
div+css实现Firefox和IE6兼容的垂直居中2008年03月10日 星期一 02:06div+css实现Firefox和IE6兼容的垂直居中
Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中,而IE6中则需要借助IE6中css的特点实现垂直居中。为了实现Firefox和IE6兼容的垂直居中,还需要 借助于!important标记。Firefox支持!important标记,而IE6忽略!important标记,因此可以使用! important标记区别Firefox和IE6。
 
[示例代码]
<html>
   <body>
       <div style="display: table-cell; vertical-align: middle; height: 200px; border: 1px solid red;">
           <p>垂直居中,Firefox only</p>
           <p>垂直居中,Firefox only</p>
           <p>垂直居中,Firefox only</p>
      
       <div style="border: 1px solid red; height: 200px; position: relative;">
          <div style="position: absolute; top: 50%;">
              <div style="position: relative; top: -50%;">
                  <p>垂直居中,IE6 only</p>
                  <p>垂直居中,IE6 only</p>
                  <p>垂直居中,IE6 only</p>
              
          
      
       <div style="border: 1px solid red; height: 200px; position: relative; display: table-cell; vertical-align: middle;">
          <div style="position: static !important; position: absolute; top: 50%;">
              <div style="position: relative; top: -50%;">
                  <p>垂直居中,Firefox IE6 only</p>
                  <p>垂直居中,Firefox IE6 only</p>
                  <p>垂直居中,Firefox IE6 only</p>
 
IE VS FireFox
CSS 兼容要点:DOCTYPE 影响 CSS 处理
 
FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
 
FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
 
FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
 
FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
 
div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
 
cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
 
FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集
 
使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面。
 
1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
 
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
div{margin:30px!important;margin:28px;}
 
注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
 
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
div{maring:30px;margin:28px}
 
重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;
 
2.IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px- 10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px (左填充)=320px来计算的。这时我们可以做如下修改:
 
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
div{width:300px!important;width :340px;margin:0 10px 0 10px}
 
关于这个是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)
 
3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
 
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
ul{margin:0;padding:0;}
 
就能解决大部分问题
 
4.关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为
 
div css xhtml xml Example Source Code Example Source Code [www.52css.com]
 
 
div+css编辑网页firefox下错位的解决方法{clear 和float属性}好不容易编辑好的网页导航,在FIREFOX下测试发现错位的厉害
 
没办法,做为使用比较多的浏览器之一,不能不考虑适应它。出现错位混乱的原因主要是因为IE和FIREFOX的标准不同,某些属性的释义出现相差所致。
 
没办法只好边学边用了。clear 和float属性
在css文件里定义的容器时加入clear属性来控制页面
clear属性说明:该属性的值指出了不允许有浮动对象的边。
注意这里要注意和float属性的区分
float:该属性的值指出了对象是否及如何浮动。
当该属性不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。
clear属性支持的参数有下面4个:
none :  允许两边都可以有浮动对象
both :  不允许有浮动对象
left :  不允许左边有浮动对象
right :  不允许右边有浮动对象
 
而float属性支持的参数有下面3个:
none :  对象不浮动
left :  对象浮在左边
right :  对象浮在右边DOCTYPE 影响 CSS 处理
 
FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
 
FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
 
FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
 
FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
 
div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
 
cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
 
FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格
 
XHTML+CSS兼容性解决方案小集
使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的大家四处找^^
 
1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
 
div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
 
div{maring:30px;margin:28px}重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;
 
2.IE5 和IE6的BOX解释不一致IE5下div{width:300px;margin:0 10px 0 10px;}div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px,而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改
 
div{width:300px!important;width :340px;margin:0 10px 0 10px},关于这个是什么我也不太明白,只知道IE5和firefox都支持但IE6不支持,如果有人理解的话,请告诉我一声,谢了!:)
 
3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
 
ul{margin:0;padding:0;}就能解决大部分问题
 
4.关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为
 
<script type="text/javascript">
 
 
1、div+css 如何使网站兼容不同字体
 
使用utf-8内码进行编写
(右键-编码-选择一种其它国家的编码-查看效果)
 
asp代码如下:
<%
function chinese2unicode(Str)
dim i
dim Str_one
dim Str_unicode
for i=1 to len(Str)
Str_one=Mid(Str,i,1)
Str_unicode=Str_unicode&chr(38)
Str_unicode=Str_unicode&chr(35)
Str_unicode=Str_unicode&chr(120)
Str_unicode=Str_unicode& Hex(ascw(Str_one))
Str_unicode=Str_unicode&chr(59)
next
Response.Write Str_unicode
end function
%>
使用方法:
<%=chinese2unicode("显示的内容") %>
 
 
2、关于div+css兼容IE和firefox的问题
 
好不容易建立的div+css网页完全符合W3C标准。在ie7下显示非常完美,用firefox一测试,
1、增加   div {overflow: hidden;},目的就是让div自动适应内容高度
2、横排的div外套div
 
另外 设定
ul {
     margin: 0px;
     padding: 0px;
}
是消除li前面的空格
 
 
3、div+css兼容性问题
 
CSS 兼容要点:DOCTYPE 影响 CSS 处理
 
FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
 
FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
 
FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
 
FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式
 
div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是
 
要控制内容不要换行
 
cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
 
FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了
 
避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集
上一篇:武汉web培训:jQuery--tabs效果
下一篇:CSS框架的利与弊

web前端学习容易犯的错误

web1702“诱人”活动

抽象类和抽象方法

jquery的ajax和getJson跨域获取json数据

选择城市和中心
贵州省

广西省

海南省

有位老师想和您聊一聊