html和css中常见的浏览器兼容性问题

在html开发中我们必定会用到css，但是有时候开发中，并不是我们所想的那么顺利，比如说html和css中常见的浏览器兼容性问题，那么针对这个浏览器兼容性问题我们这节内容就来教大家如何去解决。

1、居中问题

p里的内容，IE默认为居中，而FF默认为左对齐，可以尝试增加代码：

margin: 0 auto;

2、高度问题

两上下排列或嵌套的p，上面的p设置高度(height)，如果p里的实际内容大于所设高度，在FF中会出现两个p重叠的现象；但在IE中，下面的p会自动给上面的p让出空间所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;但当这个p里面一级的元素都float了的时候，则需要在p块的最后，闭和前加一个沉底的空p，对应CSS是：

float_bottom {clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

3、clear:both;

不想受到float浮动的，就在p中写入clear:both;

4、IE浮动 margin产生的双倍距离

01#box {
 float:left;
width:100px;
 margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}

5、padding问题

FF设置 padding 后，p会增加 height 和 width，但IE不会（* 标准的 XHTML1.0 定义 dtd 好像一致了）高度控制恰当，或尝试使用 height:100%;宽度减少使用 padding但根据实际经验，一般FF和IE的 padding 不会有太大区别，p 的实际宽 = width + padding ，所以p写全 width 和 padding，width 用实际想要的宽减去 padding 定义。

6、p嵌套时 y轴上 padding和 marign的问题

FF里 y 轴上子p 到父p 的距离为父padding + 子marign

IE里 y 轴上子p 到父p 的距离为父padding 和子marign 里大的一个

FF里 y 轴上父padding=0 且 border=0 时，子p 到父p 的距离为0，子marign 作用到父p 外面

7、padding，marign，height，width的傻瓜式解决技巧

注意是技巧，不是方法：

写好标准头

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=” 
高尽量用padding，慎用margin，height尽量补上100%，父级height有定值子级height不用100%，子级全为浮动时底部补个空clear:both的p宽尽量用margin，慎用padding，width算准实际要的减去padding

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、显示类（display:block,inline）

1. display:block,inline两个元素

display:block; //可以为内嵌元素模拟为块元素

display:inline; //实现同一行排列的的效果

display:table; //for FF,模拟table的效果

display:block 块元素，元素的特点是：

总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度

<p>，<p>，<h1>，<form>，<ul> 和 <li> 是块元素的例子

display:inline 就是将元素显示为行内元素，元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。<span>，<a>，<label>，<input>，<img>，<strong> 和 <em> 是 inline 元素的例子

2.鼠标手指状显示

全部用标准的写法 cursor: pointer;

10、背景、图片类

1. background显示问题

全部注意补齐 width，height 属性

2.背景透明问题

IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

IE: filter: alpha(opacity=10);

FF: opacity:0.6;

FF: -moz-opacity:0.10;

最好两个都写，并将opacity属性放在下面

11、min-height最小高度的实现（兼容IE6、IE7、FF）

作用是：当容器的内容较少时，能保持一个最小的高度，以免破坏了布局或UI设计效果。而当容器内的内容增加的时候，容器能够自动的伸展以适应内容的变化。

#mrjin {
               background:#ccc;
               min-height:100px;
               height:auto !important;
                height:100px;
               overflow:visible;
}

12、著名的 Meyer Reset（重置）

html, body, p, 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、Box阴影(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 (让页脚永远停靠在页面底部，而不是根据绝对位置)

<p id="wrap"> 

 <p id="main" class="clearfix"></p> 

</p> 

  <p id="footer"> </p>

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及body背景色/背景图片

iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。内嵌文档时一个完整的页面，有HTML,BODY等属性。这样遇到了一个问题，如果样式表中对BODY定义过背景色/背景图片，那么内嵌文档将全部继承过来。所以如何去掉背景色和背景图片：

相关文章：

你感兴趣的文章：

标签云：