• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >浏览器兼容 > 让div+css兼容所有浏览器的一些注意事项

让div+css兼容所有浏览器的一些注意事项

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-06-02

本文主要包含div css浏览器兼容,div css教程,css div,div css网页模板,div css布局等相关知识,佚名 希望在学习及工作中可以帮助到您

1.DOCTYPE 影响 CSS 处理
2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, 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; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
7.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
8.FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
9.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法: div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反,据阿捷的说法! important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样: div{maring:30px;margin:28px}重复定义的话按照最后一个来执行,所以不可以只写margin:XXpx! important;
11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
注意事项:
1、float的div一定要闭合。
例如:(其中floatA、floatB的属性已经设置为float:left;)
<#div id=”floatA” ></#div>
<#div id=”floatB” ></#div>
<#div id=”NOTfloatC” ></#div>
这里的NOTfloatC并不希望继续平移,而是希望往下排。
这段代码在IE中毫无问题,问题出在FF。原因是NOTfloatC并非float标签,必须将float标签闭合。
在
<#div class=”floatB”></#div>
<#div class=”NOTfloatC”></#div>
之间加上
<#div class=”clear”></#div>
这个div一定要注意声明位置,一定要放在最恰当的地方,而且必须与两个具有float属性的div同级,之间不能存在嵌套关系,否则会产生异常。
并且将clear这种样式定义为为如下即可:
代码如下:

 

您可能想查找下面的文章:

  • 让div+css兼容所有浏览器的一些注意事项
  • div+css通用兼容性代码整理
  • DIV+CSS 兼容小集
  • DIV+CSS 浏览器兼容性小结

相关文章

  • 2017-06-02火狐在用offsetHeight获取div的高度时为0的解决方法
  • 2017-06-02兼容IE6、IE7的min-width、max-width写法
  • 2017-06-02IE9下DIV本来应该居中的结果显示为居左
  • 2017-06-02IE下target获得焦点时产生虚线问题的解决方法
  • 2017-06-02css display inline block 兼容性问题写法
  • 2017-06-02在IE8 FF中使用padding设置select控件文字垂直居中
  • 2017-06-02css firefox火狐浏览器下的兼容性问题
  • 2017-06-02div层调整z-index属性在IE中无效原因分析及解决方法
  • 2017-06-02IE与Firefox中CSS兼容性技巧大全
  • 2017-06-02IE6不支持opacity半透明 BUG的解决方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS Hack 浏览器兼容整理
    • 让IE6支持important的注意事项
    • IE.JS解决IE兼容性问题方法汇总
    • css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
    • 解决360双核浏览器兼容模式的页面显示问题
    • IE6下兼容性常见的几个问题与解决方法
    • IE下target获得焦点时存在虚线问题的解决方法
    • IE6: border的transparent透明解决方案
    • important的妙用解决firefox和ie的css兼容问题
    • 详解IE浏览器的haslayout属性及相关兼容性问题解决

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有