td在relative模式下，IE9不显示border,chrome正常显示边框

申君健

发布于 2018-09-21 07:34:50

96300

代码可运行

文章被收录于专栏：前端侠2.0前端侠2.0

运行总次数：0

代码可运行

百度上怎么也搜不出答案，很奇怪的问题。在IE9的 F12调试中，明明td有1个像素的边框，偏偏不显示。

最后用bing搜索，找到老外的帖子。就立马解决问题。这让我感觉像是，一般医生折腾也看不好病，好医生总能一语中的。对国外同行由衷佩服。

/*这样不显示边框*/
.thisTd
{
    position:relative;
}
/*第一个老外说这样，立马有边框*/
.thisTd
{   z-index=-1;
    position:relative;
}

但这样，td是显示在table之下的，当移动时，会被table的其它部门盖住。

/*第二个老外说这样，成功*/
.thisTd
{    background-clip: padding-box;
    position:relative;
}

原来背景也有边界的：决定背景会盖住哪些部分。

background-clip: border-box    
background-clip: padding-box
background-clip: content-box

background-clip: inherit

豁然开朗！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2014/07/28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度