css 笔记

第一种：常用的全局CSS属性设置    //参考大型网站，如凤凰网

（1）清除所有的标记的内外边距

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

（2）项目符号

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

（3）全局字体颜色设置

body{font-size:12px;color:#444;}

（4）常用标题的设置

h1,h2,h3,h4,h5,h6{font-size:100%}

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}

（5）全局链接

a{text-decoration:none;cursor:pointer}

a:link, a:visited {color:#004276}

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

（6）图片

img{border:none;}     ie6 图片有边框，兼容性问题，要去边框

（7）浮动和清除

.float1{float:left;}

.float2{float:right}

.clear{clear:both;}

.blank10{height:10px;clear:both;}   添加空白div  解决 div margin 上下边距会合并，兼容性问题

（8）颜色

.red{color:#FF0000;}

.blue{color:#0000FF;}

.green{color:#00ff00;}

安装IETEST 测试 ie 6 

（1）ie5网页居中

    IE5下的居中，应该是：body{text-align:center} 加上这个，再在最大的div加{text-align:left;}

    Firefox下的居中，应该是：margin:0px auto;

    body{text-align:center;}

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

    <body>

        <div class="box">

            xx xx xx

        </div>

    </body>

    （2）单行内容垂直中齐

    Div{height:80px;line-height:80px;}

    （3）IE中元素浮动时，margin左右加倍的问题

    解决办法：Display:inline;  

margin:0 auto;  ie6还是不行   问题被 （1）解决

margin 左右边距在Ie6下会加倍，上下边距会合并，兼容性问题

上下边距会合并，在中间加 div{height:10px;}

.div1{width:200px;height:200px;background-color:#0000FF;margin:50px;float:left; display:inline;}

//第一个div 的 display为行内样式 解决"margin 左右边距在Ie6下会加倍"

.div2{width:200px;height:200px;background-color:#0000FF;margin:50px;float:left;}

<body>

<div class="div1"></div>

<div class="div2"></div>

    （4）实现1px高度的<div>

在IE6下解决办法：overflow:hidden;  //超出1px外的部分全部隐藏掉

<div style="width:100px; height:1px; overflow:hidden;"></div> //超出的部分隐藏掉

css 全局 兼容性问题的更多相关文章

  1. CSS的兼容性解决方案

    什么是兼容性? 同一个网页,在不同浏览器下(IE6.IE7.IE8)下的显示效果不一致,这就是说"CSS不兼容". IETESTer可以同时测试IE5.5.IE6.IE7.IE8这 ...

  2. 浏览器的兼容性（CSS浏览器兼容性、CSS hack）

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

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

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

  4. CSS全局声明*与body的区别

    通常在写CSS前,为了保证兼容性及展示效果的一致,先会清除浏览器默认样式.此时有两种用法比较常用:1.*{};  2.body{}; 之前我比较偏好于用*{},比较便于把控样式的设置.一直也没试过bo ...

  5. CSS实现兼容性的渐变背景(gradient)效果

    利用css 3实现渐变可以很方便的更改它的颜色,并且能够减少图片的制作,但是它的兼容性并不好,下面的代码就是实现利用css 渐变兼容的代码: .gradient{ width:300px; heigh ...

  6. 【转】CSS浏览器兼容性与解析问题终极归纳

    1.怪异模式问题:漏写DTD声明,Firefox仍然会按照标准模式来解析网页,但在IE中会触发怪异模式.为避免怪异模式给我们带来不必要的麻烦,最好养成书写DTD声明的好习惯. 2.IE6双边距问题:在 ...

  7. 【转】CSS实现兼容性的渐变背景(gradient)效果

    一.有点俗态的开场白 要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现 ...

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

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

  9. div+css的兼容性问题和解决方法

    1. 默认的内外边距不同 问题: 各个浏览器默认的内外边距不同 解决: *{margin:0;padding:0;}   2. 水平居中的问题 问题: 设置 text-align: center    ...

随机推荐

  1. TortoiseSVN使用方法

    1.初始化本地SVN目录,在某个文件夹鼠标右键点击. 初始化后目录 2.将某个目录下代码,添加到SVN目录中.                            3.将添加进去代码提取出来. 在某 ...

  2. gedit配置记

    gedit配置记 起因 突然感觉sublime用用这里那里不方便(虽然很好看> >),然后稍微手调了一下gedit发现gedit还是非常可用的(雾)... 阶段一 我感觉sublime各种 ...

  3. Design Elevator

    From: https://discuss.leetcode.com/topic/89/write-elevator-program-using-event-driven-programming/9 ...

  4. Recover Binary Search Tree

    Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without changing ...

  5. poj 1001

    http://poj.org/problem?id=1001 这是一道高精度的运算,如果你之前有写过那种高精度的乘法的题目的话,做这个也还是比较简单的.. 思路:我是首先把小数点的位置确定下来,然后其 ...

  6. 5.nodejs权威指南--HTTP

    1. HTTP 1.1 服务器 var http = require('http'); var server = http.createServer(function(req,rsp){ req.on ...

  7. Java for LintCode 链表插入排序

    用插入排序对链表排序 解题思路: 最省时间的方法是使用优先级队列,但是无法通过,那就直接插入排序好了. public ListNode insertionSortList(ListNode head) ...

  8. 士兵杀敌（三）_RMQ(区间最值查询)

    士兵杀敌(三) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5   描述 南将军统率着N个士兵,士兵分别编号为1~N,南将军经常爱拿某一段编号内杀敌数最高的人与杀敌数最低的人进 ...

  9. 修改EsayUi 中 tree 的原有样式，变为according 之类的样式 ，且子菜单显示在右侧

    easyUi 中 tree 框架的属性有: 修改原有展开样式代码如下: onExpand:function(node,param){ $(this).children("li"). ...

  10. JavaScript高级程序设计学习笔记--基本概念

    1.语句 ECMAScript中的语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾,如下例所示: var sum=a+b //即使没有分号也是有效的语句--推荐 var diff=a-b; ...