三九宝宝网宝宝教育学龄段教育

css div在各浏览器的兼容性分析

02月11日 编辑 39baobao.com

[绩效导向的文化兼容性]绩效导向的文化兼容性 平安引进了如此多的重量级海外人才,自然离不开它富有吸引力的薪酬待遇。2007年年报显示,平安高管除马明哲外共有4人的税后薪资在千万元以上,其中梁家驹的...+阅读

以前收集的东西,希望对你有用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; } /* Moz */ * html #1 { color: #666; } /* IE6 */ *+html #1 { color: #999; } /* IE7 */ 那么在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; 5 IE与宽度和高度的问题 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上也能用,可以把一个 放到标签下,然后为div指定一个类: 然后CSS这样设计: #container{ min-width: 600px; width:expression(document.body.clientWidth

它实际上通过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代码 9 属性选择器(这个不能算是兼容,是隐藏css的一个bug) p[id]{}div[id]{} 这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用 属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的. 10 IE捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。

有些内容显示不出来,当鼠标选择这个区域是发现内容...

以下为关联文档:

无法初始化兼容directx的声音设备怎样解决这就是关机功能失效或不正常的故障。该如何来解决这类故障呢? 一、关机过程及故障原因 Windows的关机程序在关机过程中将执行下述各项功能:完成所有磁盘写操作,清除磁盘缓存,执...

穿越火线为何与win7配色方案不兼容咋办解决方法如下: 1、首先鼠标右键点击桌面空白处,选择个性化一项,进入电脑个性化设置; 2、进入主题里面,向下拉动,选择windows7 basic一项主题; 3、选择windows7 basic,以后,点击保存...

请高手分析下是不是而条内存不兼容造成打游戏时蓝屏其他不蓝不知道你玩的什么游戏,不过出现上面这个一般都是应用程序请求系统分配新的内存失败所造成的,系统分配内存出错失败,应用程序却不知道,以为系统已经分配内存给它使用,殊不知应用程...

采用fckeditor编辑器不兼容ie10怎么办猫扑软件终极解决方案第一种方法、浏览器设置兼容模式打开IE,点击“工具”菜单,选择“兼容性视图设置”,勾选“在兼容性视图中显示所有网站”选项即可。第二种方法、在使用编辑器的网页的:下面加第三...

推荐阅读
图文推荐