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兼容性解决方案小集
使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面。
1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
Example Source Code [www.52css.com]
div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样:
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来计算的。这时我们可以做如下修改:
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有值所以先定义
Example Source Code [www.52css.com]
ul{margin:0;padding:0;}
就能解决大部分问题
4.关于脚本,在xhtml1.1中不支持language属性,只需要把代码改为
Example Source Code [www.52css.com]
就可以了
这里是一个width:500px;margin:10px;padding:10px; border:10px;的一个盒子.
使用widht(空格)/**/:530px,解决IE5.x系列的盒解析bug,因为IE5.x系列浏览器能读到这句.在IE5.x Win,IE6.0 Win下效果一致.
如何使用hack解决IE5.x盒解析bug? #content {
width:530px; //这个是错误的width,所有浏览器都读到了
voice-family: "\"}\""; //IE5.X/win忽略了"\"}\""后的内容
voice-family:inherit;
width:500px; //包括IE6/win在内的部分浏览器读到这句,新的数值(300px)覆盖掉了旧的
}
html>body #content { //html>body是CSS2的写法
width:500px; //支持CSS2该写法的浏览器有幸读到了这一句,IE 5.x不支持的。
} #content {
width:500px !important; //这个是正确的width,大部分支持!important标记的浏览器使用这里的数值
width(空格)/**/:530px; //IE6/win不解析这句,所以IE6/win仍然认为width的值是300px;而IE5.X/win读到这句,新的数值(400px)覆盖掉了旧的,因为!important标记对他们不起作用
}
html>body #content { //html>body是CSS2的写法
width:500px; //支持CSS2该写法的浏览器有幸读到了这一句
} <!--[if Lte IE6]>
#content {
width:530px
}
<[!endif]-->
这里是一个width:500px;margin:10px;padding:10px; border:10px;的一个盒子,IE5.x Win解析不正常。
IE6盒模型在向后兼容的同时也包容了以前的错误,IE6其实有两个核心,在旧的页面前他仍旧表现出对错误的宽容,只有在文档中严格地加上文档类型(DOCTYPE)声明,IE6才能够接受正确的box-model所以,hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作
转载于:https://www.cnblogs.com/leeolevis/archive/2009/10/17/1585043.html
css网页布局兼容性有哪些要点与诀窍相关推荐
- IE和Firefox浏览器CSS网页布局不同点
CSS网页布局,最令大家头疼的问题就是浏览器兼容性,虽然webjx.com介绍过很多这方向的 知识,但依然让很多开发人员晕头转向,今天的这篇文章,将列出css和javascript在IE和Firefo ...
- css网页布局中文字排版的属性和用法
前段时间,学习了几个大的网站的图文混排的方法.今天总结下, css网页布局中文字排版的相关属性以及用法 .包括:设定字体.颜色.大小.段落空白,首字下沉.首行缩进.中文字的截断.固定宽度词内折行(wo ...
- Float构建三栏DIV CSS网页布局
你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...
- html css网页布局实例简单,Div+CSS网页布局项目实战一(含设计图、HTML和CSS源文件)...
网页的基本结构 新建一个文件夹,命名为"DIV+CSS布局练习",在文件夹下新建两个空的记事本文档,输入以下内容: Div+CSS网页布局项目实战:页面布局与规划|www.125j ...
- 南大软院大神养成计划--CSS网页布局
学习小结 今天主要学习了CSS样式设置小技巧和CSS网页布局. 网页主要元素是图片和文字,网页的基本布局就是CSS样式将块与块不同的摆放.对一些元素设置它的水平位置,垂直位置,最终达到目的. 比如说水 ...
- python学习 day49之CSS网页布局
CSS网页布局 一 网页布局方式 二 标准流 三 浮动流 什么是脱离文档流? 浮动元素脱标文档流意味着 注意点: 让两个元素显示到一行的 两种实现方式 方式一:修改显示方式为inline-block ...
- 054.CSS网页布局
文章目录 一.网页布局方式 二.标准流 三.浮动流 (一)浮动流相关概念 1.什么是浮动流? 2.什么是脱离文档流? 3.什么是半脱离文档流? (二)如何使用浮动流 1.浮动元素贴靠问题 2.浮动元素 ...
- week9 day4 CSS网页布局
week9 day4 CSS网页布局 一.网页布局方式 二.标准流 三.浮动流 3.1 什么是脱离文档流? 3.2 什么又是半脱离文档流 3.3 浮动元素贴靠问题 3.4 浮动元素字围现象 3.5 浮 ...
- Div+CSS网页布局对网站搜索引擎优化的影响
Div+CSS网页布局对网站搜索引擎优化的影响 我们都知道DivCSS网页布局的好处,它对网站搜索引擎优化的影响有哪些呢? 网站优化使用 DIV+CSS佈局,页面代码精简,这一点相信对XHTML有所瞭 ...
最新文章
- Windows下创建PXE网络安装Linux[Redhat AS5.5]IBM X3650
- jtable根据内容自动调整列宽
- 网上的一篇spring security详解教程,觉得不错,转过来了
- Linux RPM 常用命令
- hikari如何切换数据源_hikari数据库连接池
- Tsinsen A1493 城市规划(DP + CDQ分治 + NTT)
- 解决Div自适应高度的方法(转)
- matlab 游标 精度,如何在MATLAB数据光标中显示更高精度的数字?
- 基于深度学习的大豆病虫害自动计数(SLIC超像素方法进行图像分割)
- 自动化运维工具(ansible入门教程)
- python基础--面向对象之封装
- switchHost管理员身份运行出错问题
- 【笔记】逻辑门图解—与门、或门、非门、与非门、或非门、异或门、同或门
- 供应链优势持续赋能 国美生态圈日趋完善
- 使用小米蓝牙耳机airdots青春版的感受及单耳双耳配对教程(转载)
- python中的defined什么意思_我的python怎么又not defined
- 2.5导入和混合配置 P61 Spring实战 第四版
- 使用addClass和removeClass完成内容切换
- 与时间和频率测量有关的一些重要概念(抖动,游走,MTIE、TDEV)
- 未能加载文件或程序集 Renci.SshNet, Version=2016.1.0.0, Culture=neutral, PublicKeyToken= 1cee9f8bde3db106或它的某