div 中的内容重叠圆角。答案

【问题标题】：Content in div overlapping rounded corners.div 中的内容重叠圆角。
【发布时间】：2016-12-13 23:56:51
【问题描述】：

我正在尝试在表格元素上获得圆角。理想情况下，我希望在 IE 7-10、Chrome 和 Firefox 上显示圆角。为此，我使用JQuery Corner。我面临的问题是，当我将默认的圆角效果应用于围绕我的表格的 div 时，表格与边框/角重叠。

这里是截图：

为什么表格超出了我的 div？

【问题讨论】：

不要试图强迫浏览器做它不支持的事情，这样的事情会发生。
@KyleSevenoaks 我不明白你的意思。你是说如果布局丑陋就这样因为这是浏览器问题？你是说浏览器不支持圆角？
不，不要这样。如果某个浏览器不支持圆角，你为什么要费心去强制它呢？如果是这样，那就太好了！但尝试让旧版浏览器执行这些新奇事物是徒劳的，而且往往是一场艰苦的战斗。
@KyleSevenoaks，让您知道，该屏幕截图是在最新版本的 chrome 中拍摄的。 GionaF 的回答解决了 chrome 的问题，但 IE 7 存在一个小问题。边框周围没有线。
@KyleSevenoaks 我明白了。正如 Justing 所说，这个问题适用于所有浏览器，而不仅仅是旧浏览器。

【解决方案1】：

Tables don't accept border-radius as a property.

您可以做的是将它包装在一个 div 中并赋予该边框半径，同时移除表格的边框（或赋予边框与 div 的背景相同的颜色。）

【讨论】：