IE兼容问题之一:table--td设置背景颜色or背景图片,border不能正常显示(用的框架是layui)

一、问题

table在火狐、谷歌都能正常显示,只有在IE中不能显示边框,无论是IE11还是IE8、IE9。如图:
正常情况下:
https://img-blog.csdn.net/20171027151128133?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFuMjYzMzY0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
IE下:
https://img-blog.csdn.net/20171027151331228?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFuMjYzMzY0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

二、经过

取消样式中的背景颜色or背景图片就可以正常显示,查看其它样式,都没问题;在table
    border-collapse: collapse;
    border-spacing: 0;
的样式中,去掉 border-collapse: collapse; 的样式,发现可以出现border,有个问题:border线太粗。。

三、结果

layui样式中有这么一个样式:
.layui-table td, .layui-table th {
    position: relative;
    padding: 9px 15px;
    min-height: 20px;
    line-height: 20px;
    font-size: 14px;
}
去掉 position: relative; IE8+都可以正常显示border了

四、感想

果然,IE很后妈。。

猜你喜欢

转载自blog.csdn.net/yan263364/article/details/78365334