css 即使< details>属性显式设置为inherit，元素的子元素也不会继承任何属性

xwmevbvl 于 2023-02-10 发布在其他

关注(0)|答案(2)|浏览(149)

背景：我使用了流行的box-sizing: border-box全局CSS设置，发现该规则无法遍历<details>元素。
我已经将这个问题提炼为一个显而易见的最小示例：<details>元素设置了几个样式，而<div>子元素试图继承其中的一些样式。
我注意到继承不适用于任何样式属性（box-sizing，border等）。就好像<details>元素不被认为是<div>的父元素一样。但是，哪个元素是div的父元素呢？
我错过了什么，还是这是一个错误的Chrome？

<details open style="box-sizing: border-box; width: 100px; border: 5px solid red">
  <div style="box-sizing: inherit; width: 100%; border: 5px solid red; padding:10px">
    Content
  </div>
</details>

css

来源：https://stackoverflow.com/questions/68527383/children-of-the-details-element-do-not-inherit-any-properties-even-though-the

2条答案

按热度按时间

wn9m85ua1#

这似乎是Webkit和Firefox中的一个问题。不幸的是，我得到的唯一一个坚持、工作并且只针对细节元素的修复是：

details {
    box-sizing: border-box;

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
}

赞(0）回复(0）举报 2023-02-10

wfypjpf42#

在这里，这是一个bug，当你已经给了父元素宽度，而它的子元素正在使用它的box sizing属性时，就没有必要给予子元素单独的宽度了。
火狐注意到了，但是Chrome单独考虑了宽度。试试这段代码，你应该可以在每个浏览器上使用。

<details open style="box-sizing: border-box; width: 100px; border: 5px solid red">
        <div style="box-sizing:inherit;border: 5px solid red; padding:10px">
            Content
        </div>

赞(0）回复(0）举报 2023-02-10

我来回答

css 即使< details>属性显式设置为inherit，元素的子元素也不会继承任何属性

2条答案

相关问题

热门标签

最新问答