标签最低高度设置min-height不兼容
问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
碰到几率：5%
解决方案：如果我们要设置一个标签的最小高度200px，
需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；
当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。
也可如下解决：
◆IE6认识的hacker 是下划线_ 和星号 *
◆IE7 遨游认识的hacker是星号 *
比如这样一个CSS设置：
height:300px;*height:200px;_height:100px;
IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt
， 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。
继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；
IE7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，
因为它们不认识_height。所以它们会把高度解析为200px，剩下的浏览器只认识第一个height:300px;
所以他们会把高度解析为300px。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。元素居中问题
div里的内容，IE默认为居中，而FF默认为左对齐，可以尝试增加代码margin: 0 auto;IE浮动 float margin产生的双倍距离
#box {
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}padding问题
FF设置 padding 后，div会增加 height 和 width，
但IE不会 （* 标准的 XHTML1.0 定义 dtd 好像一致了）高度控制恰当，
或尝试使用 height:100%;宽度减少使用 padding但根据实际经验，
一般FF和IE的 padding 不会有太大区别，
div 的实际宽 = width + padding ，
所以div写全 width 和 padding，width 用实际想要的宽减去 padding 定义。列表类
1. ul标签在FF中默认是有 padding值的，而在IE中只有margin有值
先定义 ul {margin:0;padding:0;}
2. ul和ol列表缩进问题消除ul、ol等列表的缩进时，样式应写成: {list-style:none;margin:0px;padding:0px;}行内元素和块状元素的区别 （display:block,inline）
块状元素独占一行，会换行。默认情况下，宽度自动填满父元素宽度，如果父元素为100px,
子元素不写宽度默认为100px;
行内元素宽高不能由css决定，而是由内容决定的
行内元素的margin和padding的垂直方向上不产生边距效果
可以使用display:block;或display:inline;实现块级元素和行内元素的相互转换
常用的块状元素有：
<div>,<p>,<h1>~<h6>,<ol>,<ul>,<dl>,<table>,<form>,<address>,<blockquote>
常用的行内元素有：
<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<img>,<input>,<q>,<var>,<cite>,<code>跨浏览器的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;
}文字阴影（CSS3）
.text { text-shadow: 1px 1px 1px #666;
filter: Shadow(Color=#666666, Direction=135, Strength=5); }Box阴影(CSS3)
.box { box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666; }iframe元素內嵌頁面如何去掉继承的html及body背景色/背景图片
iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。
内嵌文档时一个完整的页面，有HTML,BODY等属性。这样遇到了一个问题，
如果样式表中对BODY定义过背景色/背景图片，那么内嵌文档将全部继承过来。
所以如何去掉背景色和背景图片：
【1】去掉背景色：filter:Chroma(Color=white);
举例：
<iframe width="100%" height="400" marginwidth="0"
marginheight="0" scrolling="no" frameborder="0"
leftmargin="0" topmargin="0" style="filter:Chroma(Color=white);" ></iframe>
【2】去掉背景图片：
举例：
<iframe width="100%" height="400" marginwidth="0"
marginheight="0" scrolling="no" frameborder="0"
style="filter:Chroma(Color=white);" allowTransparency="true" ></iframe>
注意：内嵌页面同时也要增加BODY属性：
<body bgcolor="transparent" style='background:transparent'>为什么web标准中无法设置IE浏览器滚动条颜色了？
原来样式设置：
<!--<style type="text/css">-->
<!--body{scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff; }-->
<!--</style>-->
解决办法是将body换成html。如何定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，
例如：overflow:hidden | zoom:0.08 | line-height:1px怎样使一个div层居中于浏览器中
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
div {
position:absolute;
top:50%;
left:50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
width:200px;
height:200px;
border:1px solid red;
}文字与图片垂直居中对齐方法？
为图片与文字的共同父元素所有的后代元素定义*{vertical-align:middle};例如:
<p>我要的坚强<img src="i/image.gif" /></p>
只需定义p*{vertical-align:middle}即可使文字与图片同行垂直居中.
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
