如果完全可以不考虑低版本浏览器用户的就不用去纠结小部分代码问题
然后具体事情具体分析
js的兼容可以借助框架和库 比如jquery,或者自己写个方法判断和兼容该浏览器
css的兼容 其实在养成良好代码习惯和思路之后 能遇上的兼容问题其实是非常少的,很针对性的可以写一点hack,但不要多用
谷歌 IE9 火狐 三个浏览器对CSS的要求基本上差不多，不过也不能说完全一样，有时候在IE下默认居左，在火狐下会出现居中， 只要添加相应的属性即可，最麻烦的还属IE6 7 ，如果不考虑的话，就简单多了火狐的纠错能力相对来说是比较差的，也就是说一般的css的小问题不会显示出来，所以你以后写css的时候的得加强一下你这个问题一般来容易错位的原因有：
1、宽度计算的太紧，也就是子级宽度总和正好等于父级的宽度，有时候某些样式会导致不同浏览器显示的值会有所不同，比如margin左右边距或者boder的计算值等；
2、html代码的排布顺序问题，比如两个同级的标签一个加了float:left一个加了float:right那么一般防止出错的话会把设定了float:right的标签写在设定了float:left的标签上面，也就是先谢左浮动的再写右浮动的；这样浏览器解析的时候就相当于先右浮动再左浮动；举例如下：
<div style="width:300pxheight:22px">
<div style="float:leftwidth:150pxheight:22px"></div>
<div style="float:rightwidth:140pxheight:22px"></div>
</div>
改为：
<div style="width:300pxheight:22px">
<div style="float:rightwidth:140pxheight:22px"></div>
<div style="float:leftwidth:150pxheight:22px"></div>
</div>
如果你宽度设定的没问题的话我认为你这个问题的原因应该是第二条
