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. 11.6---矩阵查找元素（CC150）

    思路,一旦提到查找就要想到二分查找. public static int[] findElement(int[][] a, int n, int m, int key) { // write code ...

  2. Ajax基础2

    什么是服务器 网页浏览过程的分析 如何配置自己的服务器程序(AMP) 什么是Ajax 无刷新数据读取 异步,同步 Ajax基础(2) 使用Ajax 基础请求显示txt的文件 字符集编码 缓存,阻止缓存 ...

  3. 文件上传（js, C#）

    ajaxFileUpload http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html

  4. AngularJS之Provider, Value, Constant, Service, Factory, Decorator的区别与详解

    本文转载自http://camnpr.com/javascript/1693.html 首先,provider, value, constant, service, factory他们都是provid ...

  5. angular.js初探

    2015年7月27日 22:26:35 星期一 用在我论坛里的小栗子: 先列出来一级回帖, 点击帖子前边的"查看回复"按钮无刷新的去请求该帖子的所有回复 首先要引用js文件, 我这 ...

  6. 后台子线程（非主线程）更新UI引起的警告

    一.问题描述 -(void)sendAsynchronousRequest { NSLog(@"%@",[NSThread currentThread]); [SVProgress ...

  7. codeforces Good Bye 2015 B. New Year and Old Property

    题目链接:http://codeforces.com/problemset/problem/611/B 题目意思:就是在 [a, b] 这个范围内(1 ≤ a ≤ b ≤ 10^18)统计出符合二进制 ...

  8. codeforces 514B. Han Solo and Lazer Gun 解题报告

    题目链接:http://codeforces.com/problemset/problem/514/B 题目意思:给出双头枪的位置(x0, y0),以及 n 个突击队成员的坐标.双头枪射击一次,可以把 ...

  9. 【编程题目】题目：定义 Fibonacci 数列 输入 n，用最快的方法求该数列的第 n 项。

    第 19 题(数组.递归):题目:定义 Fibonacci 数列如下:/ 0 n=0f(n)= 1 n=1/ f(n-1)+f(n-2) n=2输入 n,用最快的方法求该数列的第 n 项. 思路:递归 ...

  10. IOS- 单例

    单例模式的意思就是只有一个实例.单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例.这个类称为单例类. 1.单例模式的要点: 显然单例模式的要点有三个:一是某个类只能有一个实例: ...