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. 使用uwsgi 部署python web服务

    uwsgi, wsgi协议的一个很好的实现,源码在这里:https://github.com/unbit/uwsgi c语言编写,有兴趣可以研究下. 上DEMO: wsgi_server.py def ...

  2. Java BigDecimal使用

    //除法:精确到后4位BigDecimal a = new BigDecimal(1213); BigDecimal b = new BigDecimal(10302); BigDecimal rat ...

  3. espcms列表页ajax获取内容 - 并初始化swiper

    <link rel="stylesheet" href="swiper.min.css" type="text/css" media= ...

  4. Linux下VMware虚拟机网卡不能运行在混杂模式解决办法

    转自: http://blog.csdn.net/henulwj/article/details/50347489 问题描述 在Linux如果以普通用户运行VMware Workstations,创建 ...

  5. Oracl各个版本的下载地址

    http://www.oracle.com/technetwork/cn/database/enterprise-edition/downloads/112010-win32soft-098630-z ...

  6. SQL 执行计划(一)

    缓存执行计划  SQL Server 2008提供了一些服务器对象来分析执行计划Sys.dm_exec_cached_plans:    包含缓存的执行计划,每个执行计划对应一行.Sys.dm_exe ...

  7. css 图形，非常完美

    http://www.360doc.com/content/12/0327/13/8674_198243134.shtml

  8. VIM常用操作总结

    VIM常用的模式网上说法不太一样,但是大同小异,这里大致分一下,便于后面总结 1.一般模式 默认打开文件后的模式,这个时候只能移动光标,不能编辑 2.输入模式 一般模式按下i,就可以进入输入模式,输入 ...

  9. Python~第三方模块

    第三方库还有MySQL的驱动:MySQL-python,用于科学计算的NumPy库:numpy,用于生成文本的模板工具Jinja2 模块搜索路径 Windows下: 双\\   sys.path.ap ...

  10. Divide and conquer:4 Values whose Sum is 0(POJ 2785)

    找四个数的和为0 题目大意:给定四个集合,要你每个集合选4个数字,组成和为0 这题是3977的简单版,只要和是0就可以了 #include <iostream> #include < ...