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. linux系统性能调优第一步——性能分析(vmstat)

    linux系统性能调优第一步--性能分析(vmstat) 分类: LINUX 性能调优的第一步是性能分析,下面从性能分析着手进行一些介绍,尤其对linux性能分析工具vmstat的用法和实践进行详细介 ...

  2. 在sublime-text中设置浏览器预览

    配置在Chrome,Firefox中打开 安装 SideBarEnhancements 然后通过ctrl + k, ctrl + b打开侧边栏,在侧边栏的文件中右击,找到 open width -&g ...

  3. float 在内存中如何存储的

    float类型数字在计算机中用4个字节存储.遵循IEEE-754格式标准:    一个浮点数有2部分组成:底数m和指数e 底数部分 使用二进制数来表示此浮点数的实际值指数部分 占用8bit的二进制数, ...

  4. java获取对象属性类型、属性名称、属性值

    /** * 根据属性名获取属性值 * */ private Object getFieldValueByName(String fieldName, Object o) { try { String ...

  5. Qt 常用的功能

    1.程序重启 void Widget::reStart() {   qApp->closeAllWindows(); QProcess::startDetached(qApp->appli ...

  6. NoSQL之【MongoDB】学习（二）：DML和查询操作说明

    摘要: 操作MongoDB的方法和关系型数据库差别很大,现在对他们进行说明,后期会逐步完善. ##开头表示MySQL** 开头表示MongoDB 创建: Mongodb:文档数据库,擅长存非结构化数据 ...

  7. HttpWebRequest.GetResponse 方法

    GetResponse 方法返回包含来自 Internet 资源的响应的 WebResponse 对象. 实际返回的实例是 HttpWebResponse,并且能够转换为访问 HTTP 特定的属性的类 ...

  8. 基于bshare分享平台，在一个页面上实现多个不同内容的web分享

    <!--引入bshare SDK--><script type="text/javascript" charset="utf-8" src=& ...

  9. Effective C++ -----条款03:尽可能使用const

    如果关键字const出现在星号左边,表示被指物是常量:如果出现在星号右边,表示指针自身是常量:如果出现在星号两边,表示被指物和指针两者都是常量. char greeting[] = " he ...

  10. Linux中环境变量文件及配置（转载）

    一.环境变量文件介绍 转自:http://blog.csdn.net/cscmaker/article/details/7261921 Linux中环境变量包括系统级和用户级,系统级的环境变量是每个登 ...