(一):margin有四个值:顺序为:上右下左,'margin-top'、'margin-right'、'margin-bottom'、'margin-left',按照顺时针方向罗列。

 

 

 

(二):双标签:
<html><head><title><body><table><tr><td><span><p><form><h1><h2><h3><h4><h5><h6><object><style><b><u><strong><i><div><a><script><center>

单标签:
<br><hr><img><input><param><meta><link>

 

 

 

(三):1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
所以我们在写em的时候,需要注意两点:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

 

 

 

(四):所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

在学习浏览器兼容性之前,我想把前端开发人员划分为两类:

第一类:

是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览器的bug,并且他们制作的页面后期易维护,代码重用问题少,可以说是比较牢固放心的代码。

第二类:

是基本按照设计图来开发的前端开发人员,很多细枝末节差距很大,不如间距,行高,图片位置等等经常会差几px。某种效果的实现也是反复调试得到,具体为什么出现这种效果还模模糊糊,整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器,而是他们的技术本身了。

文章主要针对的是第一类,严谨型的开发人员,因此这里主要从浏览器解析差异的角度来分析兼容性问题

 

 

 

(五):常见的浏览器兼容性问题与解决方案大致有以下九种形式:

  一、不同浏览器的标签默认的外边界和内填充不同

  问题表现:不加样式控制下,margin和padding差异较大

  解决方案:css里 *{margin:0; padding:0;}

  备注:这是最常见也是最易解决的一个兼容问题,几乎所有的css文件开头都会用通配符*来设置各个标签外边界和内填充为0


  二、块属性标签float后,又有横向的margin情况下,在IE6显示margin比设置的大

  问题表现:IE6后面的一块被顶到下一行

  解决方案:在float的标签样式控制中加入display:inline;转化为行内属性

  备注:横向浮动的div布局,使用上margin进行边界设置时,必然会碰到此问题


  三、设置较小高度标签(一般小于10px),在IE6、IE7,遨游中高度超出设置高度值

  问题表现:IE6、7和遨游里这个标签的高度不受控制,超出自己设置的高度

  解决方案:给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度

  备注:一般出现在设置小圆角背景的标签里。出现该问题原因是IE8之前的浏览器都会给标签一个最小默认行高的高度,即使标签是空内容,标签的高度还是会有默认行高。


  四、行内属性标签,设置display:block后采用float布局,又有横向的margin情况,IE6间距bug

  问题表现:IE6的间距比超过设置的间距

  解决方案:在display:block;后面加入display:inline;display:table;

  备注:行内属性标签,为了设置宽度,需要设置为display:block;(表单元素除外)在用float布局且有横向margin后,在IE6下,就具有了块属性float后的横向margin的bug。由于设置为display:inline,高度失效,所有在后面补上display:table。


  五、图片默认有间距

  问题表现:几个img标签放在一块,有些浏览器会有默认的间距,有通配符也不起作用

  解决方案:使用float属性为img布局

  备注:img标签是行内属性标签,只要不超出容器高度,img会排在一行里,使用float是比较好的选择


  六、标签最低高度设置min-height不兼容

  问题表现:min-height本身就是一个不兼容的css属性,所以设置min-height时不能兼容所有浏览器

  解决方案:如果设置一个标签最小高度为200px,需要进行设置 {min-height:200px; height:auto !important;
height: 200px; overflow:visible;}

  备注:b/s系统前端时,当内容小于一个值时,容器的高度保持该值,当内容大于该值时,高度自适应且不出现滚动条。


  七、光标手形

  问题表现:firefox不支持hand,但ie支持pointer

  解决方案:统一使用cursor:pointer;


  八、字体大小定义不同

  问题表现:对字体大小small定义不同,Firefox为13px,而IE为16px,差别比较大

  解决方法:使用指定的字体大小如14px或者使用em


  九、IE6 3px bug

  问题表现:左侧div浮动left,右边DIV可以接着横向排列,形成典型一列固定,第二列自适应,IE6出现之间3px间隙

  解决方法:对左侧left的盒子补上_margin-right: -3px;