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 中插入一个空格
- IE 漂浮层双倍margin。
- IE7以及IE7以前浏览器版本 会为input元素增加1px的外边空白,导致包裹它的div莫名其妙的高度增加了2px。暂时的解决方法是:div增加:overflow:hidden; zoom:1; input元素增加:float:left
XHTML+CSS兼容性解决方案小集
使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面,省的大家四处找^^
- 在mozilla firefox和IE中的BOX模型解释不一致导致相差3px解决方法:
div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
div{maring:30px;margin:28px}重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx!important;
- 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不支持,如果有人理解的话,请告诉我一声,谢了!:)
- ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义
ul{margin:0;padding:0;}就能解决大部分问题
- 关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为
<script type="text/javascript">就可以了
- margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如:
<#div id="imfloat"></#div>
相应的css为
#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}
分享到:
相关推荐
可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox]! 可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox]!
可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox].zip 可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox].zip 可通过鼠标拖动调整表格单元格宽度效果代码[兼容IE,firefox].zip
o.p_p_c_gw=function(index)/*取得o.parentNode.parentNode.cells的宽度,兼容IE6和Firefox*/{ if(window.ActiveXObject){ return o.parentNode.parentNode.cells[o.parentNode.cellIndex+index].offsetWidth; }...
主要介绍了js如何获取页面高度和宽度并且兼容ie firefox chrome等主流浏览器
table拖动(兼容Firefox 3.5/IE6),固定表格宽度 table拖动(兼容Firefox 3.5/IE6),固定表格宽度 序号 公司名称 订单客户 部门 业务员 交款方式 1 软件开发网 jb51.net 广告部 王天一 现金 ...
**兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码(支持左移/右移功能)(本示例为上下两行图片进行双行滚动) **实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动...
修正了原来《http://download.csdn.net/download/guo8ke/1512418》的bug,本选项卡是自行编写的选项卡代码, 可以动态生成选显卡,关闭选项卡, 每个选项卡 对应也可页面。...本选项卡代码经过测试,兼容IE和火狐。
本选项卡是自行编写的选项卡代码, 可以动态生成选显卡,关闭选项卡, 每个选项卡 对应也可页面。...当选项卡超出了 选项卡显示栏的宽度时,可以点左右移动的按钮,来移动选项卡。...本选项卡代码经过测试,兼容IE和火狐。
本文章简单的介绍一下关于padding兼容ie6,ie8,firefox的做法,因为不同浏览器对padding理解不一样,所以在浏览时会有点差别。 padding 简写属性在一个声明中设置所有内边距属性。 说明 这个简写属性设置元素所有内...
jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置,完美兼容IE,FireFox,Google Chrome浏览器。
7. firefox与IE的父元素(parentElement)的区别 3 8. document.formName.item(”itemName”) 问题 3 9. 集合类对象问题 3 10. 自定义属性问题 3 11. input.type属性问题 3 12. event.srcElement问题 3 13. body...
CSS方法解决IE6最小高度,IE6最小宽度,IE6最大高度,IE6最大宽度,兼容IE6/IE7/IE8/火狐。
本文实例讲述了JS实现放大、缩小及拖拽图片的方法。分享给大家供大家参考,具体如下: var divId;...//图片的宽度 v_left=(document.body.clientWidth-width1)/2; v_top=(document.body.clientHeight-hei
兼容:IE6-9,Mozilla Firefox,Google Chrome,Opera等浏览器的自动适应宽度背景跟着滑动的导航。