inline的元素 高度，padding导致位置偏移

一些默认block的元素，都有默认高度，如a，span，当对这些元素设置padding时，外围的父元素不能自动包含该元素，导致排版上有些问题，很不美观，还比较难发现问题，特使是抄过来的代码，要想debug出来，还真得费一些功夫！
如下：div中方了一个a，其有背景图片，可以发现图片飞高了。 （注意这在IE8中是包含的，chrome和firefox不能包含。IE中还需要设置hight属性，虽然通过F12可以看到其默认高度；

<div style="border:solid 1px red">test<a target="_blank" style='background: url("./pic/bds.png") no-repeat scroll 0px -120px yellow; padding: 6px 0px 3px 20px;'></a></div>

从效果看span的背景色也抛出了div的border，（IE8，chrome，firefox都是如此），由此可见chrome和firefox是一致的，而IE又复杂了。而且IE要求span中间必须有内容，否则连背景颜色都不显示了。

<div style="border:solid 1px green" ><span style="padding:6px;background-color:red">test</span></div>

下面是div，可以看见修改内部div的padding，是被包含的。

<div style="border:solid 1px green" ><div style="padding:6px;background-color:red;"></div></div>

下面将div改为inline，验证正确性。

<div style="border:solid 1px green" ><div style="padding:6px;background-color:red;height:10px;display:inline"></div></div>

由以上得知firefox，chrome在处理inline的element时，思路是一致的，parent都的边框都无法包住里面的内容；
效果如下图所示：左边是chrome的效果， 右边是IE8的效果；

而IE8却又诸多的不一致性：
1. a需要设置高度，否则背景图片不显示，且被父元素包围；
2.只有在span下父元素被包含，但是需要span中有内容，否则无背景；
3。在将div改为inline的情况下，父元素仍可以包含子元素；
IE真是垃圾啊，无规律可循，并有诸多限制，在IE下编程不容易啊。测试是在IE8中完成，但愿IE9/10能有改进；