什么是兼容性?

同一个网页,在不同浏览器下(IE6、IE7、IE8)下的显示效果不一致,这就是说"CSS不兼容"。

IETESTer可以同时测试IE5.5、IE6、IE7、IE8这些版本的网页效果。

解决CSS兼容性的方法

  1. CSS全局设置的重要性
  2. 常用的CSS兼容性的总结
  3. CSS HACK(不推荐使用

CSS全局样式的设置

1、清除网页中所有标签的内填充和外边距

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form, input,p, th,td{margin:0;padding:0}

2、项目符号

ul,ol,li{list-style:none;}

3、图片边框

img{border:none;}

4、超级链接

a:link,a:visited{color:# 004276;text-decoration:none;}

a:hover{text-decoration:underline;color:#ba2636;}

5、body网页中文本颜色、大小、行高、背景色的统一设置

body{font-size:12px;font-family:simsun ,"宋体";background:#fff;color:#2b2b2b}

6、各种标题

h1{padding:11px 0 0; margin-bottom:4px;font:normal 20px/30px 黑体;text-align:center;}

h2 { padding:6px 0 0; margin-bottom:4px; font:normal 20px/30px 黑体; text-align:center; }

h3{font-size:12px}

h4{font-size:12px;font-weight:normal}

7、常用的字体颜色

.red{color:#FF0000;}

.blue{color:#0000ff;}

.gray{color:#808080;}

……

8、清除和浮动

.floatL{float:left;}

.floatR{float:right;}

.clear{clear:both;}

.blank10{height:10px;clear:both;}

常用的CSS兼容性问题

1、任何浏览器实现主页居中

IE中主页居中,使用的是text-align:center

Firefox中主页居中,使用的margin:0px auto;

body{

background:#ccc url(../images/bg-body.gif) repeat-x;

font-size:12px;

color:#444;

font-family:"宋体";

text-align:center; /*IE下的居中*/

}

ul,li{list-style:none;}

a:link,a:visited{color:#444;text-decoration:none;}

a:hover{color:#FF0000;}

.clear{clear:both;}

.box{width:960px;margin:0px auto;text-align:left;}

2、容器中,单行内容垂直居中

.title{height:30px;line-height:30px;}

3、IE6下,元素浮动,使margin左右加倍

.div1{

width:200px;

height:100px;

border:1px solid #006600;

margin:50px;

float:left;

display:inline; /*将块元素转成行内元素*/

_margin-left:25px; /* IE6能识别 */

}

4、IE6下,定义1px高的容器

.box{

height:1px;

background-color:#006600;

overflow:hidden; /*超出部分被隐藏了*/

}

5、统一光标的类型

.header .logo .div3{width:358px;height:107px;float:right;padding-top:15px;cursor:pointer;}

CSS HACK(不推荐使用)

针对不同浏览器,编写CSS 代码的过程,就叫CSS HACK。

(1)CSS属性的HACK

        .box{

background-color:#FF0000; //所有浏览器都支持

*background-color:#00FF00; // IE6和IE7支持

_background-color:#0000FF; //IE6支持

}

(2)CSS选择器的HACK (看一下即可)

.box{background-color:#FF0000;} //所有浏览器都识别

*+html .box{ *background-color:#00FF00;} //IE7能识别

*html .box{ _background-color:#0000FF;} //IE6能识别

CSS的兼容性解决方案的更多相关文章

  1. css CSS常见布局解决方案

    CSS常见布局解决方案说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案.水平居中布局首先我们来看看水平居 ...

  2. div+css通用兼容性代码整理

    一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} <style> *html{padding:0px} /* Clear Fix */ .cl ...

  3. XHTML CSS 常见问题和解决方案

    原文地址:XHTML CSS 常见问题和解决方案 作为前端开发人员,在日常的页面制作时,不可避免的会碰上这样那样的问题,我挑选了其中的一些进行总结归档,希望对大家会有所帮助: 1.如何定义高度很小的容 ...

  4. 关于在同一母版页中使用多个CSS文件的解决方案

    原文:关于在同一母版页中使用多个CSS文件的解决方案 以前都用.NET1.1没遇到这问题,现在换了2.0开始学着使用母版,结果就遇到了这个问题,在百度上一搜索才发现有不少人提出这个问题,但没找到好的解 ...

  5. 浏览器的兼容性(CSS浏览器兼容性、CSS hack)

    一.关于CSS hack(尽量不用或者少用,减少页面复杂度) 1.条件注释法:(我的测试是IE9及其以下才有效) 这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式.举例如下 只在 ...

  6. css 完美垂直居中解决方案兼容ie8以上等其他浏览器

    css 完美垂直居中解决方案兼容ie8以上等其他浏览器 <pre><!DOCTYPE html><html><head> <title>DI ...

  7. 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

    原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者: Anthony Gore 译者: 蜗牛 ...

  8. css 常见兼容性问题及解决方案

    css 兼容问题一直是困扰前端开发人员的大难题,提到兼容性立马想到了万恶的ie6,说多了都是泪,还是整理一些常见的兼容性问题以及解决的方案吧. 一. 浮动元素双边距. ①条件:ie6下,如果给元素设置 ...

  9. 常见CSS浏览器兼容性问题与解决方案【转载自http://blog.csdn.net/chuyuqing/article/details/37561313/】

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

随机推荐

  1. BZOJ 1013: [JSOI2008]球形空间产生器sphere 高斯消元

    1013: [JSOI2008]球形空间产生器sphere Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/Judg ...

  2. [WebGL] Setting Up WebGL

    In this lesson we cover setting up WebGL for use, including creating a canvas, getting the WebGL ren ...

  3. Swift3.0语法变化

    写在前面 首先和大家分享一下学习新语法的技巧:用Xcode8打开自己的Swift2.3的项目,选择Edit->Convert->To Current Swift Syntax- 让Xcod ...

  4. swift开发:试玩 Apple 站点的 playground

    https://developer.apple.com/library/prerelease/ios/documentation/swift/conceptual/swift_programming_ ...

  5. mysql 优化工具

    explain  profiling 建议提供以下信息 show table status like 'audit';show create table audit;show index from a ...

  6. php执行效率相关的语句

    一:字符替换: strtr > str_replace > preg_replace 注意: 1:一般用strtr函数的这种形式:string strtr ( string $str , ...

  7. 玩转Android之手摸手教你DIY一个抢红包神器!

    AccessibilityService是Google专门为残障人士设计的一个服务,可以让他们更方便的来操作手机.AccessibilityService一个主要功能是通过监听窗口的变化来判断用户当前 ...

  8. ios数据缓存方法

    转载自:http://zhidao.baidu.com/link?url=jNTz6lkL1way8bJ-WPY197Pe9aEM_ql-MZbVJsM5tXr7Mv82W70QQ5a9UlvhMMS ...

  9. python(5)–sys模块

    sys.argv 命令行参数list, 第一个元素是程序本身路径 sys.exit(n) 退出程序,退出时输入信息n sys.version 获取python解释程序的版本信息 sys.maxint ...

  10. python(3)-深浅拷贝

    import copy copy.copy()    浅拷贝 copy.deepcopy()   深拷贝 >>> import copy >>> a1 = 123 ...