代码兼容、技巧

代码兼容、技巧

前端开发中，一个头疼的事，就是代码的不兼容，这里贴出自己在前端开发中的一些解决经验。除了其浏览器本身的BUG外，不建议使用CSS hack来解决兼容性问题的。

IE和FF下对”li“的的高度解析不同

可以不定义高度，直接定义行高。再让li浮动 消除IE的BUG。

IE3像素问题

出现3培训BUG 时， 可以采用右边层margin-right: -3px; 解决。

需要图片在层中是垂直居中

当需要图片在层中是垂直居中，可以图片定义vertical-align: middle;，再在图片左侧加入<span></span>，定义样式display: inline-block; height: 100%; vertical-align: middle; 就是兼容的了。

子元素浮动,父元素不能自动适应高度

FF IE7下可以在父元素定义overflow: auto; IE6加入 zoom: 1; 这个触发IE的.layout。或在浮动元素后加入在浮动层后面加入<br clear="all" style="line-height: 0" />。

IE6双边距

浮动元素的外边距会加倍，但与第一个浮动元素相邻的其他浮动元素外边距不会加倍。解决方法：在此浮动元素增加样式 display:inline;

IE下图片产生的间隙

父元素直接包含<img>，这个图片下方会和父元素边缘产生间隙。 解绝方法：1.在源代码中让</div> 和<img>在同一行，因为那个间隙是由换行符产生的。2.给<img>添加样式 display:block;

IE下高度低于14像素时问题

块元素最小高度为10px，当高度定义小于14px时，仍为12px 左右; 解决方法：为此块元素添加样式 overflow:hidden; 或font-size: 0;

IE，FF下列表的li为浮动，则列表后面的元素不能换行的问题

解决方法：为这个ul定义合适的高或给包含这个ul 的父div定义合适的高。或加上<br clear="all" style="line-height: 0" />

IE,FF下子元素的上下外边界问题

IE6：子元素的上边距和父元素的上内边距叠加。FF：子元素的上边距和父元素的上内边距相加。解决方法：1、给父元素定义内边距。2、父元素设置边框，子元素定义上外边距。3、父元素定义overflow: hidden;，子元素定义上外边距。

IE,FF高度自适应问题（最小高度）

在IE6下子元素的高度能够撑开父元素，但FF，IE7下不可以。解决办法：父元素定义min-height:高度值; height:auto !important; height:高度值; （要注意先后顺序不能错）

IE,FF高度自适应问题（最大高度，最小宽度，最大宽度）

最大高度，max-height: 180px; _height: expression( this.scrollHeight > 180 ? "180px" : "auto" ); 后面两条是解决IE6问题。

最小宽度，min-width: 900px; _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<900?"900px":"");

最大宽度，max-width: 300px; _width:expression((document.documentElement.clientWidth||document.body.clientWidth)>300?"300px":"");

子元素负边距问题

IE6：超出父元素的部分会被父元素覆盖。FF：分两种情况当父元素有边框或内边距时，超出父元素的部分会覆盖父元素；没有时父元素拥有负边距。解决方法：子元素定义相对定位。

IE6诡异的奇数BUG

当父元素相对定位，子元素绝对定位时，倘若父元素的高或宽的数值是奇数，那么IE6下绝对位置会出错。解决方法： 数值改成偶数，IE6是大侠，只要服从它。

IE6和IE7下，相对定位元素不能滚动的Bug

这个BUG以前没遇到过，近期配合自动滚屏时遇到了，开始以为是JS问题，在哪找啊找，后来无果，尝试看看是不是CSS的问题，果不其然，万 恶的IE6,7，当设置了position: relative后，其元素就不能滚动了，要想解决其BUG，需要使其包裹他们的父元素也相对定位，这个时候IE7可以完美解决，IE6嘛，里面的定位坐 标可能需要实时修正下。

li元素中有右浮动，同时此元素还是英文数字

此种情况，正常下由于li不清除浮动，也不会有影响，但是对与Opear,哈哈，杯具来了，两种方法，清除每个li的浮动，再就是定义字体为 宋体。究其原因，清浮动好理解，但是为什么宋体也能解决。不过了这个BUG是Opear的.同时当li浮动后，其内部若有inline-block元素， 其父元素的行高和高对其不会产生效果，这一现象出现在此种情况，正常下由于li不清除浮动，也不会有影响，但是对与Opear

input、button在IE下随文字增加内补丁也增加

不管你怎么写margin:0;padding:0;都去不掉，唯一的解决办法是overflow:visible。

ul浮动引起的li双倍间距，IE6下

大伙听到可能会说，这不是IE6的浮动双间距BUG，其实不然，是的话也就不在这里说了。很困惑，让其LI也浮动，无果。其他浏览器正常，那 该是什么呢，退回到原始状态，我们已经定义list-style: none; 应该不会有默认的什么产生。查看ul，li的基本属性，发现有个list-style-position，列表项目标记放置在文本以内是否对齐，两个值， 默认的outside，不对其。还有inside，对其。那么会不会是他影响。不死心，强制定义下list-style-position: outside;哈哈，一切变的和谐了，既然是默认的，IE6啊，真实整死人不偿命啊，此后，我对li的重置里直接加了这条。

IE8下两个inline标签的问题

当我们让两个inline标签在一行，且中间没有空格，这一般是很正常的写法如label后面跟个span。这个时候倘若只定义行高，那问题来了，其他解析正常。IE8会多出两个像素。一般解决的话，就是两个inline标签换行写.或者给它定义高度。

来自：http://www.webfeike.net/d2/content/op_code.htm