html – 表格边框折叠无法使用内联块？_html-js-css

概述此示例以两种不同的方式显示两个表.在第一种情况下,一个表位于另一个表之上.在第二个,它们是并排的.两种情况之间的唯一区别是一个使用display：inline-block;此外,在第一种情况下,表格由< DIV>分隔.具有填充底部,并且在第二个中它们由< SPAN>分隔开.用填充权. <HTML><HEAD> <TITLE>Title</TITLE> <STYLE type="tex 此示例以两种不同的方式显示两个表.在第一种情况下,一个表位于另一个表之上.在第二个,它们是并排的.两种情况之间的唯一区别是一个使用display：inline-block;此外,在第一种情况下,表格由< div>分隔.具有填充底部,并且在第二个中它们由< SPAN>分隔开.用填充权.

<HTML><head>   <Title>Title</Title>   <STYLE type="text/CSS">   table { border-collapse: collapse; border-style: solID; border-wIDth: thin }   col { border-style: dotted; border-wIDth: thin }    td { padding-left: 0.05in; padding-right: 0.05in }   </STYLE></head><BODY>   <table>   <Col><Col><Col><Col><Col><Col>   <TR><TD>x<TD>x<TD>x<TD>x<TD>x<TD>x</table>   <div ></div>   <table>   <Col><Col><Col><Col><Col><Col>   <TR><TD>y<TD>y<TD>y<TD>y<TD>y<TD>y</table>   <div ></div>   <table >   <Col><Col><Col><Col><Col><Col>   <TR><TD>x<TD>x<TD>x<TD>x<TD>x<TD>x</table>   <SPAN ></SPAN>   <table >   <Col><Col><Col><Col><Col><Col>   <TR><TD>y<TD>y<TD>y<TD>y<TD>y<TD>y</table></BODY></HTML>

CSS2规范的17.6.2.1说明了解决崩溃边界模型中的边界冲突：

If none of the styles are ‘hIDden’ and at least one of them is not ‘none’,then narrow borders are discarded in favor of wIDer ones. If several have the same ‘border-wIDth’ then styles are preferred in this order: ‘double’,‘solID’,‘dashed’,‘dotted’,‘rIDge’,‘outset’,‘groove’,and the lowest: ‘inset’.

这似乎在第一种情况下起作用,其中实心边界在桌子边缘周围的虚线边界上获胜.但在第二种情况下,看起来两个边界都显示出来,可能相隔一个像素.

截图：

我在Chrome 37.0和IE11中都观察到了这种行为.

浏览器错误或CSS功能？有没有办法让它在内联块情况下正常工作？

注意：消除HTML标记之间的所有空白区域没有帮助.

解决方法为了它的价值,让它正常工作使用内联表而不是内联块

FIDDLE

另外,我认为你不应该设置任何表格元素

display：table,display：inline-table(或display：none – 如有必要)

– 否则事情就会陷入困境,因为你告诉桌子不再表现得像桌子了.

总结

以上是内存溢出为你收集整理的html – 表格边框折叠无法使用内联块？全部内容，希望文章能够帮你解决html – 表格边框折叠无法使用内联块？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1139820.html

html – 表格边框折叠无法使用内联块？

发表评论

评论列表（0条）