1.div的垂直居中问题 vertical-align:middle;
将行距增加到和整个DIV一样高 line-height:200px;
然后插入文字，就垂直居中了。缺点是要控制内容不要换行。
--------------------------------------------------------------------------------------------------------------------------------------
2. margin加倍的问题
设置为float的div在ie下设置的margin会加倍。
这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如：
<#div 相应的css为
#IamFloat { float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ }
--------------------------------------------------------------------------------------------------------------------------------------
3.浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px;
//这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略 }
这里细说一下block与inline两个元素：
block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);
Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);
#box { display:block; //可以为内嵌元素模拟为块元素 display:inline;
//实现同一行排列的效果 diplay:table; }
--------------------------------------------------------------------------------------------------------------------------------------
4 IE与宽度和高度的问题
IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。
这样问题就大了，如果只用宽度和高度，正常的浏览器里这两 个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。
要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}
html>body #box { width: auto; height: auto; min-width: 80px; min-height: 35px; }
--------------------------------------------------------------------------------------------------------------------------------------
5.页面的最小宽度
min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当 做最小宽度来使。
为了让这一命令在IE上也能用，
可以把一个<div> 放到 <body> 标签下，
然后为div指定一个类, 然后CSS这样设计：
#container{ min-width: 600px; width:e-xpression(document.body.clientWidth < 600? "600px": "auto" );} 第一个min-width是正常的；
但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规
它实际上通过Javascript的判断来实现最小宽度。
--------------------------------------------------------------------------------------------------------------------------------------
6.DIV浮动IE文本产生3象素的bug 左边对象浮动，
右边采用外补丁的左边距来定位，
右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;}
#left{ float:left; width:50%;} #right{ width:50%;}
*html #left{ margin-right:-3px; //这句是关键} <div > <div ></div> <div ></div> </div>
--------------------------------------------------------------------------------------------------------------------------------------
7.IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：
对#layout使用line-height属性 或者给#layout使用固定高和宽。
页面结构尽量简单。
--------------------------------------------------------------------------------------------------------------------------------------
8.float的div闭合;
清除浮动;自适应高度;
①     例如：<#div ><#div ><#div NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。
(其中floatA、floatB的属性已经设置为 float:left;) 这段代码在IE中毫无问题，问题出在FF。
原因是NOTfloatC并非float标签，必须将float标签闭合
。在 <#div <#div < #div 并且将clear这种样式定义为为如下即可：
.clear{ clear:both;} 作为外部 wrapper 的 div 不要定死高度 为了让高度能自动适应，
要在wrapper里面加上overflow:hidden;
当包含float的 box的时候，高度自动适应在IE下无效，
这时候应该触发IE的layout私有属性(万恶的IE啊！)
用zoom:1;可以做到，这样就达到了兼容。
例如某一个wrapper如下定义： .colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
--------------------------------------------------------------------------------------------------------------------------------------
9.对于排版
我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景, 譬如: <div <div <div <div </div> 比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的, 但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了, 原因在于page不是float属性,而我们的page由于要居中,不能设置成float,
所以我们应该这样解决:
<div <div style=”float:left;width:100%”> <div <div <div </div> </div>
再嵌入一个float left而宽度是100%的DIV解决之 10.万能float 闭合(非常重要!) 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上 即可,屡试不爽.
/* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */
或者这样设置：
.hackbox{ display:table; //将对象作为块元素级的表格显示}
--------------------------------------------------------------------------------------------------------------------------------------
11.高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。
例：
#box { }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
<div > <p>p对象中的内容
</div>
解决方法：
在P对象上下各加2个空的div对象CSS代码： .
1{height:0px;overflow:hidden;}或者为DIV加上border属性。
--------------------------------------------------------------------------------------------------------------------------------------
12 .IE6下为什么图片下有空隙产生
解决这个BUG的方法也有很多, 可以是改变html的排版, 或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom 都可以解决.
--------------------------------------------------------------------------------------------------------------------------------------
13.如何对齐文本与文本输入框 加上 vertical-align:middle;
<style type="text/css">
<!-- input {width:200px; height:30px;border:1px solid red;vertical-align:middle; } -->
</style>

14.web标准中定义id与class有什么区别吗?
一.web标准中是不容许重复ID的,比如 div 不容许重复2次,而class 定义的是类,理论上可以无限重复, 这样需要多次引用的定义便可以使用他.
二.属性的优先级问题 ID 的优先级要高于class,看上面的例子
三.方便JS等客户端脚本,如果在页面中要对某个对象进行脚本操作,那么可以给他定义一个ID,否则只能利用遍历页面元素加上指定特定属性来找到它,这是相对浪费时间资源,远远不如一个ID来得简单.

15. LI中内容超过长度后以省略号显示的方法
此方法适用与IE与OP浏览器
<style type="text/css">
<!-- li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } -->
</style>
16.为什么web标准中IE无法设置滚动条颜色了
解决办法是
将body换成html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!-- html { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; } -->
</style>

17.为什么无法定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的, 解决的方法也有很多
例如:
overflow:hidden | zoom:0.08 | line-height:1px

18.怎么样才能让层显示在FLASH之上呢
解决的办法是给FLASH设置透明 <param value="transparent" />

19.怎样使一个层垂直居中于浏览器中
这里我们使用百分比绝对定位,与外补丁负值的方法,负值的大小为其自身宽度高度除以2
<style type="text/css">
<!— div { ; top:50%; lef:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; } -->
</style>

各种主流浏览器CSS、BUG兼容的更多相关文章

  1. ie6,ie7,ie8 css bug兼容解决记录

    ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...

  2. 认识hasLayout——IE浏览器css bug的一大罪恶根源 （转）

    认识hasLayout--IE浏览器css bug的一大罪恶根源 转 什么是hasLayout?hasLayout是IE特有的一个属性.很多的ie下的css bug都与其息息相关.在ie中,一个元素要 ...

  3. 主流浏览器css兼容问题的总结

    最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑.主要测试了chrome,fire ...

  4. ie6,ie7,ie8 css bug兼容解决方法

    IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...

  5. 认识hasLayout——IE浏览器css bug的一大罪恶根源

     原文地址:http://neverned.blog.163.com/blog/static/1265524200933021130561/   什么是hasLayout?hasLayout是IE特有 ...

  6. 主流浏览器Css&js hack写法

    参考: BROWSER HACKS 主流浏览器的Hack写法

  7. 浏览器css bug及bug解决方法

    Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px; ...

  8. 针对各种浏览器css不兼容的写法

    /*针对谷歌浏览器内核支持的CSS样式*/@media screen and (-webkit-min-device-pixel-ratio:0) { 样式 } /*针对IE6特制识别的CSS样式*/ ...

  9. 【转】IE浏览器CSS BUG集锦

    Internet Explorer CSS Bugs Overview Internet Explorer is famous for not supporting many of CSS prope ...

随机推荐

  1. 【转】JVM 架构解读

    每个Java开发人员都知道字节码由JRE(Java运行时环境)执行.但许多人不知道JRE是Java Virtual Machine(JVM)的实现,它分析字节码,解释代码并执行它.作为开发人员,我们应 ...

  2. MVC下压缩输入的HTML内容

    在MVC下如何压缩输出的HTML代码,替换HTML代码中的空白,换行符等字符? 1.首先要了解MVC是如何输出HTML代码到客户端的,先了解下Controller这个类,里面有很多方法,我们需要的主要 ...

  3. 论Pair的重要性

    这些天我在用React和D3做图表,从已经实现的图表里复制了一些坐标轴的代码,发现坐标轴上的n个点里,只有第一个点下面能渲染出文字提示,其余点下面都无法渲染出文字. 和组里的FL一起百思不得其解好几天 ...

  4. MySQL Performance-Schema(二) 理论篇

    MySQL Performance-Schema中总共包含52个表,主要分为几类:Setup表,Instance表,Wait Event表,Stage Event表Statement Event表,C ...

  5. 版本控制-svn服务器搭建和常用命令（centos 6.3）

    Svn是比较优秀的版本控制工具,虽然功能和性能上无法和Git媲美,但由于其容易搭建和使用的特性,所以在各个小公司还是很受欢迎的.使用Git可参考<版本控制-Git服务器搭建和常用命令使用> ...

  6. linux的七大运行级别及级别修改

    运行级别     级别说明 0           所有进程将被终止,机器将有序的停止,关机时系统处于这个运行级别 1           单用户模式,用于系统维护,只有少数进程运行,同时所有服务也不 ...

  7. WinformWPF 多线程访问控件【转】

    大家知道WPF中多线程访问UI控件时会提示UI线程的数据不能直接被其他线程访问或者修改,该怎样来做呢? 分下面两种情况 1.WinForm程序 )第一种方法,使用委托: private delegat ...

  8. 异步HTTPHandler的实现

    使用APM的方式实现 using System; using System.Web; using System.Threading; class HelloWorldAsyncHandler : IH ...

  9. c# float显示时保存一位小数

    UI显示时候,需求保留一位小数 //保留一位小数 参考: http://blog.sina.com.cn/s/blog_620531730100kfz6.html float ff = 1.01f; ...

  10. 解决 node-gyp command not found 的问题

    node-gyp明明已经安装了,但是不能执行,显示命令找不到,然后重装之,发现npm有一个提示信息: npm WARN prefer global node-gyp@3.4.0 should be i ...