CSS兼容的一些问题
DIV+CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV+CSS网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV+CSS设计的网页,就应该更注意IE6 IE7 FF对CSS样式的兼容.
兼容性处理要点
1、DOCTYPE 影响 CSS 处理
2 、 FF下给 div 设置 padding 后会导致 width 和 height 增加(DIV的实际宽度=DIV宽+Padding), 但IE不会. 解决办法:给DIV设定IE、FF两个宽度,
在IE的宽度前加上IE特有标记" * "号。或用 !important 多设一个 height 和 width(但随着IE7对!important的支持所以慎用)。
3、 随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)
4、div 的垂直居中问题: vertical-align:middle;
将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行
5、在mozilla
firefox和IE中的BOX模型解释不一致导致相差2px解决方法:
div{margin:30px!important;margin:28px;} 注意这两个 margin的顺序一定不能写反, important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样: div {maring:30px;margin:28px}重复定义的话按照最后一个来执行,所以不可以只写margin:xx px!important; #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-}
margin加倍的问题
设置了float浮动属性的div,在设置margin属性,这个在IE6下,就会出现Margin加倍的现象;这个是IE6的一个著名的BUG。解决办法就是给DIV设置属性
display:inline; 例如:
<#div id=”imfloat”> 相应的css为 #IamFloat{ float:left; margin:10px;/*IE8 FF下理解为10px*/ display:inline;/*IE6下理解为20px*/}
页面的最小宽度
页面的最小宽度 min -width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实
际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到 <body> 标签下,然后为div指定一个类, 然后CSS这样设计:
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 第一个min-width是正常的;但第2行
的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
IE6的3像素Bug
IE6的3像素Bug DIV 设置Float浮动后, IE6下就是产生3象素的bug; 左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边
有3px的间距. #box{ float:left; width:800px;} #left{ float:left; width:50%;} #right{ width:50%;} *html #left{ margin-right:-3px; //这句是
关键} <div id="box"> <div id="left"></div> <div id="right"></div> </div> 六 IE6下图片下有空隙产生 IE6下为什么图片下有空隙产生解决这个
BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-
bottom 都可以解决.
浮动IE6产生的双倍距离
用JS判断不同的浏览器载入不同的css
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
//根据不同的浏览器调用不同的CSS!
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
document.write('<link href="ie.css" type="text/css" rel="stylesheet" />');
}else{
document.write('<link href="ff.css" type="text/css" rel="stylesheet" />');
}
</script>
</head>
<body >
<div id="box"> 在不同的浏览器下,这行字的色应该不同!</div>
</body>
</html>
CSS兼容的一些问题的更多相关文章
- CSS兼容各浏览器的hack
CSS兼容各浏览器的hack:建议:尽可能的手写代码,可以有效的提高学习效率和深度.浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定 ...
- 主流浏览器css兼容问题的总结
最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑.主要测试了chrome,fire ...
- CSS兼容问题实用建议
CSS兼容问题,是美工最头痛的问题.做测试时,用谷哥和360浏览器(最新)都没有什么问题,用 IE6/IE8测试,问题就冒出来了.微软现在出IE10,我电脑上已经无法用IE6准确测试,IE-TESTE ...
- css兼容问题集合
css兼容问题 兼容问题 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白 ...
- css兼容各个浏览器的三角形图标
css兼容各个浏览器的三角形图标 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹 ...
- CSS兼容常用技巧
请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和 ...
- ie6 7 8 9 firefox的css兼容问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css兼容问题与实践归纳总结
css兼容问题与实践归纳总结 一.IE6/7 原生块元素与display:inline-block; <div style="display:inline-block;"&g ...
- 浏览器 CSS 兼容写法的测试总结
做前端最讨厌的就是 IE6,7,8,虽然被淘汰的浏览器,但是在中国用户仍然很多,不可能像国外网站一样直接就不管它了,这样会流失很多流量啊. 现在有了IE9,IE10还好些,几乎和 Chrome,Fir ...
- Normalize.css源码注释翻译&浏览器css兼容问题的理解
版本v5.0.0源码地址: https://necolas.github.io/normalize.css/5.0.0/normalize.css 翻译版: /*! normalize.css v5. ...
随机推荐
- BTE 增强
BTE的设计思路还是比较简单,和BADI有点类似.在标准程序中留有OPEN_FI的出口(以函数OPEN_FI_PERFORM_event id_type的形式存在),然后提供一个可配置的TABLE,可 ...
- iOS用AFN上传图片到java后台
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event { AFHTTPSessionMana ...
- Java中修饰符
下面这张图应该大家都见过,根据图表来记忆最好理解 范围 private friendly(默认) protected public 当前类 √ √ √ √ 当前包中的类 √ √ √ 当前包中的类, ...
- ios开发设置不同字体
最近项目开发中遇到需要设置指定字体的需求,研究了一下字体设置,最后附有我写的一个小demo,先来看一下效果: 开始上网搜了一下,普遍说到以下方法 for(NSString *fontfamilynam ...
- 安装Genymotion与集成eclipse,最后有集成android studio
本安装过程从不用到VPN 一切国内网络都可以解决. 首先下载Genymotion,网址 https://www.genymotion.com/account/login/ 首先需要注册,我使用163 ...
- OllyDBG V1.10聆风听雨汉化版
软件名称:OllyDBG V1.10聆风听雨汉化版 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win 32位/64位 软件大小: 3.84MB 图片预览: 软件简介: Ollydbg2. ...
- c/c++笔试面试经典函数实现
/* strcpy函数实现 拷贝字符串 */ char* Strcpy(char* dst, char* src) { assert(dst != NULL && src != NUL ...
- 第一百二十一节,JavaScript事件绑定及深入
JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...
- oracle中关于Oracle Database 11g Express Edition 打不开的问题
报的错误是http://127.0.0.1:...什么的找不到该文件 如果是127.0.0.1没问题,而且oracle中5个服务没问题,而且oracle可以启动.. 最后的问题是8080端口冲突,如果 ...
- document对象相关的几个常用的方法
方法 描述 var newP=createElement("p"); 创建了一个p标签,p也可替换为div,span等 var oldTxt=createTextNode(&qu ...