写css样式时遇到的一些问题及体会

2019独角兽企业重金招聘Python工程师标准>>>

        昨天写了一个主页，很久没怎么写样式了，感觉有点生疏了，最恶心的是浏览器的兼容性问题，我只做了火狐和ie8的兼容性，但做起来还是挺麻烦的。

        在组合图片的时候，就遇到组合不上，总有误差，没法把图片叠加到另一张图片上面，或者浏览器不兼容问题等等。其中，很多组合问题都是因为开始没把div划分好，导致，做的时候才发现这样不行。有的图片可能只能作为背景来显示，但有的就必须用<img/>标签来显示。我采用的是相对定位，开始还用了绝对定位，但因为浏览器分辨率问题，放弃了绝对定位。但是有个地方还是没弄懂，按理说，我在外div用相对定位，内div用绝对定位，这样应该是没问题的，但我怎么做都不行，绝对定位还是以屏幕坐标为主....。

        还有就是切图的原因咯，如果图没切好，那也很不好组合，有的地方，可能只需要一个像素平铺过去就行了，但有的地方，你就必须分成好几块来处理。图片也不能切太大，因为效率问题，图片大了，加载会很慢，页面打开半天了，图片还没显示出来，这是很悲剧的,这是必须要避免的.....总之，切图也是很讲技术的。

        最后就是浏览器兼容问题了，这点很恶心，但又不得不去做，因为每个人都有自己喜欢使用的浏览器，A客户喜欢使用IE,但B客户却在用火狐，所以，怎么也得考虑兼容问题，其实把层分好了，很多浏览器还是很兼容的，可能有小部分地方，浏览器会不兼容，而需要使用不同的样式属性和值。

举个例子：

如：火狐中：margin-right:20px; 就能达到效果了，但在IE中却多了或者差那么点像素：margin-right:25px;才能达到效果。

咋办？凉拌！当然我们不能用凉拌，只要上网去百度一下你会找到很多方式解决。

解决方法是在火狐用的地方加：!important 关键字，加上这个的话，火狐会优先考虑带有!important关键字的属性值，而ie不这样。

如：margin-right:20px !important; margin-right:25px; 这样，就能在火狐和IE中达到同样的效果了。

但是需要注意的是：margin-right:20px !important; 必须在margin-right:25px;前面，否则没效果，不信去试试。

把临时感想写出来存着，希望以后能用上....

    

转载于:https://my.oschina.net/adwangxiao/blog/91111