td嵌套div元素行内CSS设置border-radius失效问题咨询

嘿，我太懂这种“代码逻辑没问题但就是不生效”的憋屈感了！咱们来一步步搞定这个圆形div的问题：

可能的原因排查 #

先确认几个关键点：

• 打开浏览器开发者工具（按F12），选中这个div，查看Styles面板，看看border-radius属性是不是真的被应用了——有没有被划掉（说明被其他样式覆盖），或者压根没出现在样式列表里（说明生成HTML的函数可能没正确输出内联样式）。
• 有没有可能是box-sizing的问题？如果div有默认的padding或border，会导致宽高不是严格的20px，进而没法形成正圆。

修正后的解决方案 #

试试下面的代码，我做了几个优化：

<table>
  <tr>
    <td>
      <div style="width: 20px; height: 20px; border-radius: 50%; background: #ffcc00; color: #000; box-sizing: border-box; display: flex; align-items: center; justify-content: center;">!</div>
    </td>
    <td>Something else...</td>
  </tr>
</table>

关键优化点 #

• 去掉了过时的-moz-border-radius和-webkit-border-radius前缀，现在所有主流浏览器都支持标准的border-radius了，没必要再加前缀。
• 新增*box-sizing: border-box;*：确保元素的宽高包含padding和border，避免宽高被额外属性撑开，保证正圆的比例。
• 加了*display: flex; align-items: center; justify-content: center;*：让div里的!文字居中，看起来更协调，不影响圆形的显示。

如果还是不生效？ #

如果上面的代码还是没效果，大概率是样式被覆盖了：

• 检查父元素（比如td、tr、table）有没有设置overflow、transform之类的属性影响子元素。
• 可以临时给border-radius加上!important（不推荐长期用，但能快速排查是不是优先级问题），比如border-radius: 50% !important;。

内容的提问来源于stack exchange，提问作者Subrata Sarkar