嘿，这个问题我之前在项目里也踩过坑！其实核心原因是inline-block元素的百分比宽度计算规则和固定单位（px、vw、em）不一样，咱们一步步拆解：

为什么%单位会失效？ #

inline-block元素的百分比宽度是相对于父元素的内容宽度（注意：不包含父元素的padding、border，除非设置了box-sizing: border-box）来计算的。但这里有个关键前提：父元素必须有一个明确的、不依赖子元素的宽度值。

如果你的父元素也是inline/inline-block类型，而且没设置固定宽度，那父元素的宽度是由子元素的内容撑开的——这就形成了「子元素宽度依赖父元素，父元素宽度又依赖子元素」的循环，浏览器没法算出准确的百分比宽度，自然就显示异常了。

而px、vw、em这些单位就没这个问题：px是绝对单位，vw基于视口宽度，em基于字体大小，它们都不需要依赖父元素的内容宽度来计算，所以能正常渲染。

解决方法 #

给你几个实用的解决方案，按需选择：

• 给父元素设置明确宽度：不管是固定px值，还是基于视口的百分比（比如width: 100%），只要父元素有了确定的宽度，子元素的%单位就能找到参考系。示例代码：

.parent {
  display: inline-block;
  width: 600px; /* 明确父元素宽度 */
  /* 或者用百分比：width: 100%; */
}
.child {
  display: inline-block;
  width: 50%; /* 现在会正确计算为300px */
}

• 把父元素改为block级元素：block元素默认会占满可用宽度（比如父容器的100%），这样子元素的%宽度就有了稳定的参考基准：

.parent {
  display: block; /* 替换inline-block */
}
.child {
  display: inline-block;
  width: 50%; /* 正常生效 */
}

• 改用Flexbox/Grid布局：现代布局方案能更直观地控制元素宽度，避免inline-block的这类兼容性问题。比如用Flex：

.parent {
  display: flex;
}
.child {
  flex: 0 0 50%; /* 直接指定占比，无需inline-block */
}

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