本文探讨了在Web前端开发中遇到的浏览器兼容性问题，并提供了解决方案，特别是针对图片和文字横向对齐的技术细节。文章还介绍了调试工具如Firebug和Chrome Development Tools的使用。
做web前台开发的选手如果自己裸奔html+syle+css，就会碰到浏览器兼容性的问题，比如做好了一个页面，firefox下对齐了，但ie下就对不齐，好不容易ie搞定了，chrome上就不对了。很ft。
这样的case很麻烦，错误类型也很多。经验和方法都很重要。
最近碰到个问题，左侧一张图片上有一排数字，需要和右侧的文字横向对齐（其中右侧还有select和input这样的html元素），因此要不断微调各种height。
这边的大忌是到处设height，因为不同浏览器对border的理解不一样，因此设好height了，未必在所有浏览器上都是这样的高度，因此左右很难完全对齐。
比如右侧是用table做的，有2种比较保险的做法：
把table的height设的很小，完全用td的height来撑开；
另一种，table的height设定，其他所有的height都不设，它会自动调节。
还有些容易出错的，font-size和border-spacing:0 0要合适，否则height也会很厌恶。
如果考虑table与上下元素的关系，要适当设置padding-top, padding-bottom
调试这些繁琐的事情，当然需要好的工具了。
firefob的话firebug
chrome自带的development tool
这些都是能直接在浏览器里改变style的值，看到具体效果的
扫一扫
1628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
