1，居中问题
格里的内容，IE默认为居中，而FF默认为左对齐，可以尝试增加代码：
margin:0auto;
2，高度问题
两上下排列或嵌套的格，上面的格设置高度（高度），如果DIV里的实际内容大于所设高度，在FF中会出现两个格重叠的现象;但在IE中，下面的格会自动给上面的div让出空间所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是身高：100％;但当这个div里面一级的元素都浮了的时候，则需要在格块的最后，闭和前加一个沉底的空DIV，CSS对应是：
.float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}
3，明确：两者;
不想受到浮动浮动的，就在格中写入明确：两者;
4，IE浮动边缘产生的双倍距离
#box {float:left;width:100px;margin:0 0 0 100px; //这种情况之下IE会产生200px的距离display:inline; //使浮动忽略}
5，填充问题
FF设置填充后，div会增加高度和宽度，但IE不会（*标准的XHTML1.0定义dtd好像一致了）高度控制恰当，或尝试使用高度：100％;宽度减少使用padding但根据实际经验，一般FF和IE的填充不会有太大区别，div的实际宽=宽度+填充，所以div写全宽和填充，宽度用实际想要的宽减去填充定义。
6，div嵌套时y轴上padding和marign的问题
FF里y轴上子div到父div的距离为父padding +子marign
IE里y轴上子div到父div的距离为父padding和子marign里大的一个
FF里y轴上父padding = 0且border = 0时，子div到父div的距离为0，子marign作用到父div外面
7，填充，marign，高度，宽度的傻瓜式解决技巧
注意是技巧，不是方法：
写好标准头
<！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Transitional // EN”“/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns =“/1999/xhtml”>
高尽量用填充，慎用余量，高度尽量补上100％，父级高度有定值子级高度不用100％，子级全为浮动时底部补个空明确：两者的格宽尽量用余量，慎用填充物，宽度算准实际要的减去填充
8，列表类
1. ul标签在FF中默认是有padding值的，而在IE中只有margin有值
先定义ul {margin：0; padding：0;}
2. ul和ol列表缩进问题消除ul，ol等列表的缩进时，样式应写成：{list-style：none; margin：0px; padding：0px;}
9，显示类（显示：块，内联）
1.显示：块，内联两个元素
显示：块;//可以为内嵌元素模拟为块元素
显示：内联;//实现同一行排列的的效果
显示：表;//对于FF，模拟表的效果
display：块块元素，元素的特点是：
总是在新行上开始;高度，行高以及顶和底边距都可控制;宽度缺省是它的容器的100％，除非设定一个宽度
<div>，<p>，<h1>，<form>，<ul>和<li>是块元素的例子
display：inline就是将元素显示为行内元素，元素的特点是：和其他元素都在一行上;高，行高及顶和底边距不可改变;宽度就是它的文字或图片的宽度，不可改变。 <span>，<a>，<label>，<input>，<img>，<strong>和<em>是内联元素的例子
2.鼠标手指状显示
全部用标准的写法游标：指针;
10，背景，图片类
1. background显示问题
全部注意补齐width，height属性
2.背景透明问题
IE：filter：progid：DXImageTransform.Microsoft.Alpha（style = 0，opacity = 60）;
IE：filter：alpha（opacity = 10）;
FF：不透明度：0.6;
FF：-moz-opacity：0.10;
最好两个都写，并将透明度属性放在下面
11，最小高度最小高度的实现（兼容IE6，IE7，FF）
作用是：当容器的内容较少时，能保持一个最小的高度，以免破坏了布局或UI设计效果而当容器内的内容增加的时候，容器能够自动的伸展以适应内容的变化。
#mrjin {background:#ccc;min-height:100px;height:auto!important;height:100px;overflow:visible;}
12，着名的Meyer Reset（重置）
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6，p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}:focus {outline: 0;}body {line-height: 1;color: black;background: white;}ol,ul {list-style: none;}table {border-collapse: separate;border-spacing: 0;}caption,th,td {text-align: left;font-weight: normal;}blockquote:before,blockquote:after,q:before,q:after {content: "";}blockquote,q {quotes: "" "";}
13，跨浏览器的CSS透明度
.transparent {opacity: 0.7;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";filter: alpha(opacity=70);-moz-opacity: 0.7;-khtml-opacity: 0.7;
14，文字阴影（CSS3）
.text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }
15，盒阴影（CSS3）
.box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; }
16，Sticky Footer（让页脚永远停靠在页面底部，而不是根据绝对位置）
<div id="wrap"><div id="main" class="clearfix"></div></div><div id="footer"> </div>
CSS部分：
* {margin: 0;padding: 0;}html,body,#wrap {height: 100%;}body>#wrap {height: auto;min-height: 100%;}#main {padding-bottom: 150px;}#footer {position: relative;margin-top: -150px;height: 150px;clear: both;}.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {display: inline-block;}* html .clearfix {height: 1%;}.clearfix {display: block;}
17，IFRAME元素内嵌页面如何去掉继承的HTML及体背景色/背景图片
IFRAME元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。内嵌文档时一个完整的页面，有HTML，BODY等属性。这样遇到了一个问题，如果样式表中对BODY定义过背景色/背景图片，那么内嵌文档将全部继承过来所以如何去掉背景色和背景图片。：
【1】去掉背景色：过滤器：色度（颜色=白色）;
举例：<iframe width =“100％”height =“400”marginwidth =“0”marginheight =“0”scrolling =“no”frameborder =“0”leftmargin =“0”topmargin =“0”style =“filter：色度（颜色=白色）;”> </ IFRAME>
【2】去掉背景图片：
举例：<iframe width =“100％”height =“400”marginwidth =“0”marginheight =“0”scrolling =“no”frameborder =“0”leftmargin =“0”topmargin =“0”style =“filter：色度（颜色=白色）;”allowTransparency =“true”> </ iframe>
注意：内嵌页面同时也要增加BODY属性：
<body bgcolor =“transparent”style ='background：transparent'>
18，为什么网络标准中无法设置IE浏览器滚动条颜色了？
body {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;}
原来样式设置：
解决办法是将车身换成HTML。
19，为什么中火狐浏览器下文本无法撑开容器的高度？
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的，那我又想固定高度，又想能被撑开需要怎样设置呢办法就是去掉高度设置最小高度：200像素;这里为了照顾不认识min-height的IE6可以这样定义：
div { height:auto!important; height:200px; min-height:200px; }
20，如何定义1px的左右高度的容器？
IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow：hidden |zoom：0.08 |行高：1px的
21，怎么样才能让层显示在FLASH之上呢？
解决的办法是给FLASH设置透明：
<a href="/">：</ a>
<pre lang =“html”line =“1”>
<param name =“wmode”value =“transparent”/>
22，怎样使一个DIV层居中于浏览器中？
首先，需要这两个层都是兄弟关系，其次，这两个层都需要绝对定位举个例子：
div {position: absolute;top: 50%;left: 50%;margin: -100px 0 0 -100px;width: 200px;height: 200px;border: 1px solid red;}
23，怎样使DIV背景透明？
body {font: normal 12px/30px Verdana;}#test {position: relative;width: 400px;height: 50px;}#inner {z-index: 2;position: absolute;top: 10px;left: 10px;width: 380px;height: 30px;color: #003;font-weight: bold;text-align: center;}#transbox {z-index: 1;position: absolute;top: 0px;left: 0px;width: 400px;height: 50px;background: #eef;border: 1px solid #a00;filter: alpha(opacity=40);-moz-opacity: 0.4;opacity: 0.4;}
<P>这里很多的文字，这里很多的文字，这里很多的文字，这里很多的文字，</ P>
24，怎样去掉选中时的虚线框？
利用onfocus =“this.blur（）;”例如：<a href="#" οnfοcus="this.blur();">测试</a>
25，IE6下PNG背景显示问题？
针对IE6下PNG背景显示问题，CSS中可以这样解决：
_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’http: ///uploads/images/bj.jpg’);
26，文字与表单对齐方法？
设置表单元素第一字体为Tahoma（Verdana系列也可），并设置vertical-align：middle。建设大家把这个约定写入CSS RESET中，能减小很多麻烦：
body,button,input,select,textarea{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle}
27，OPTGROUP标签的用法？
OPTGROUP标签，鲜为人知，它对提升选择表单用户体验很有帮助就是可以在有很多选项时，对这些选项分组：例子：
<select id =“selectId”>
<optgroup label =“GROUP ONE”>
<option value =“1”>一个选择</ option>
<option value =“2”>两个选择</ option>
</ OPTGROUP>
<optgroup label =“GROUP TWO”>
<option value =“3”>三选</ option>
<option value =“4”>四选</ option>
</ OPTGROUP>
</选择>
28，文字与图片垂直居中对齐方法？
为图片与文字的共同父元素所有的后代元素定义* {垂直对齐：中间};例如：
<p>我要的坚强<img src =“i / image.gif”/> </ p>
只需定义P * {垂直对齐：中间}即可使文字与图片同行垂直居中。
29，文章标题列表中日期居右显示的两种方法？
方法甲相对方法乙省资源，但比方法乙要多写两句代码，使用时请视情况而定：
方法一：
<P>这是文章标题<跨度> -10-10 </跨度> </ p>
然后定义p和跨度的样式：
p {position：relative}
p span {position：absolute;右：0}
方法B：
<P> <跨度> -10-10 </跨度>这是文章标题</ P>
然后定义跨度右浮动：
p span {float：right}
30，IE6下最大/最小宽度/高度实现？
ie6下max / min-width / height实现，_ width：expression_r（this.width> 600？“600px”：true）;, height同理。
31，空白外边距互相叠加的问题？
一般通过添加透明边框或者1px的的内边距避免;
其一，为外围元素定义透明边框。具体到本例，即在样式div中加入border：1px solid transparent;
其二，为外围元素定义内边距填充..具体到本例，即在样式的div中加入填充：1px的;
例如：<！doctype html>
<HTML>
<HEAD>
<meta charset =“utf-8”>
<title>空白边距叠加demo@Mr.Think </ title>
<风格>
体{宽度：300像素;FONT-FAMILY： '微软雅黑';字体大小：1em的;TEXT-INDENT：10px的;行高：1.25}
DIV {背景：＃a40000;余量：10px的}
div p {background：#eee; margin：15px}
</样式>
</ HEAD>
<BODY>
<div> <p>空白边距叠加demo@Mr.Think </ p> </ div>
</ BODY>
</ HTML>
32，网页设计中的默认字体
字体：12px / 1.5 Tahoma，Helvetica，Arial，sans-serif;
说明：line-height采用1.5，也就是18px。这是淘宝视觉规范中定义的行高，对于12px的字体，这个行高看起来很舒服.font家族默认采用宋体。宋体是英文的Windows操作系统的默认字体，这个字体比较均衡，显示中英文混排很不错，是经久耐看的一款字体。
33，浏览器兼容 - 常用的css hack
/*第一种*/.title {height: 200px;*height: 200px;_height: 200px;}/*第二种*/.title {height: 200px;*height: 200px !important;*height: 200px;}/*第三种*/.title {height: 200px;}*html.title {height: 200px;}*+html.title {height: 200px;}
转载于文章（Chick here!）
如果觉得《Html和CSS在浏览器中常见的兼容性问题处理》对你有帮助，请点赞、收藏，并留下你的观点哦！
