显示类型被未知来源覆盖 [英] Display types are overridden by unknown source

问题描述

我有一个包含三个元素的容器:一个图像和两个div:

I have a container that contains three elements: one image and two divs:

我希望所有图像都是内联块，并且已在其类中指定:

I want all images to be inline blocks and have specified so in their classes:

 .first_image {
        display: inline-block;
        height: 20px;
        width: 20px;
 }
 .first_div {
        width: 100%;
        display: inline-block;
 }
 .second_div {
        width: 52px !important;
        height: 40px !important;
        display: inline-block;
        background-color: #3798D4;
 }
 .container {
        display: inline-flex;
 }

但是，当我运行和检查时，这些是实际的属性:

However, when I run and inspect, these are the actual attributes:

1. 容器(类输入为.container)

1. 第一张图片

1. 第一格

1. 最后一个div(该类具有.edit_pen_container类，并包含一个按钮)

1. The last div (this one has class .edit_pen_container and contains a button)

问题在于1.尽管应为inline-flex，但显示为flex；尽管应为inline-block，但2.，3和4.仍显示为block.我真的不明白为什么会改变.另外，该属性不会被删除，因此似乎没有被覆盖.

The issue is that 1. displays as flex although it should be inline-flex, 2., 3., and 4. display as block although they should be inline-block. I really don't see why it changes. Also, the property is not crossed out, so it doesn't seem to be overridden.

顺便说一句，这样您就可以理解我的逻辑了，img将保留在该位置，div 1的宽度为100％，因为它必须占用div的其余部分.当用户将鼠标放在div 1中时，div 2出现并且将采用固定宽度(52px)，并且div 1将缩小以允许div 2占用其所需的空间.也许我的逻辑是错误的，但这就是我想要做的.

By the way, so you can understand my logic, img will stay there, div 1 has a width of 100% because it has to take the rest of the div. When a user puts the mouse in div 1, div 2 appears and will take a fixed width (52px) and div 1 will shrink to allow div 2 to take the space it needs. Maybe my logic is wrong but this is what I want to do.

所有HTML元素均已通过javascript添加，因此我没有要显示的DOM层次结构.

All HTML elements have been added through javascript, so I don't have a DOM hierarchy to show.

推荐答案

您写道:

问题在于1.尽管应为inline-flex，但显示为flex；尽管应为inline-block，但2.，3和4.仍显示为block. ，该属性不会被删除，因此它似乎没有被覆盖.

The issue is that 1. displays as flex although it should be inline-flex, 2., 3., and 4. display as block although they should be inline-block... Also, the property is not crossed out, so it doesn't seem to be overridden.

所以我们要澄清一下:

• 元素#1(.container)是一个伸缩容器.您是说问题在于您声明了display: inline-flex，但是浏览器将元素呈现为display: flex.

• Element #1 (.container) is a flex container. You're saying the problem is that you declared display: inline-flex, but the browser is rendering the element as display: flex.

元素#2，#3和#4是#1的流入子元素.这意味着它们是弹性项目.您是说问题在于您已将这些项目设置为display: inline-block，但是浏览器将其渲染为display: block.

Elements #2, #3 and #4 are the in-flow children of #1. This means they are flex items. You're saying the problem is that you've set these items to display: inline-block, but the browser is rendering them as display: block.

好的.让我们一一介绍这两个要点.

Okay. Let's cover these two points one-by-one.

为什么display: inline-flex计算为display: flex?

Why is display: inline-flex computing to display: flex?

因为这就是flexbox规范所要求的.

Because that's what the flexbox specification requires.

§ 3. Flex容器:flex和inline-flex显示 值

§ 3. Flex Containers: the flex and inline-flex display values

如果元素指定的display为inline-flex，则其元素 display属性在某些情况下计算为flex: CSS 2.1部分中的表格 9.7 进行了修改，以包含另一行，在指定的 值"列和计算值"列中的flex.

If an element’s specified display is inline-flex, then its display property computes to flex in certain circumstances: the table in CSS 2.1 Section 9.7 is amended to contain an additional row, with inline-flex in the "Specified Value" column and flex in the "Computed Value" column.

因此，在某些情况下，inline-flex会计算为flex，如上面摘录中链接到的表中所述.这就是您的代码中正在发生的事情.从技术上讲，这不是替代，这就是为什么您没有看到inline-flex被删掉的原因.

So inline-flex computes to flex in certain situations, as described in the table linked to in the excerpt above. That's what is happening in your code. Technically, it is not an override, which is why you're not seeing inline-flex crossed out.

为什么在弹性项目上display: inline-block计算为display: block?

Why is display: inline-block computing to display: block on flex items?

同样，因为这就是flexbox规范所要求的.

Again, because that's what the flexbox specification requires.

§ 4.弹性项目

弹性项目的display值被块化:如果生成弹性容器的元素的流入子项的指定display是内联级别的值，它将计算为其等效的块级别.

The display value of a flex item is blockified: if the specified display of an in-flow child of an element generating a flex container is an inline-level value, it computes to its block-level equivalent.

还请注意，您无法控制弹性项目的display值.将元素设为flex容器后，flex项目的display属性将由flex算法控制.尝试在弹性项目上设置display规则的尝试将被浏览器忽略.这就是您在代码中看到的内容:display: inline-block被忽略了(但再次，从技术上讲，它不被覆盖，这就是为什么inline-block未被划掉的原因).

Also note that you cannot control the display value of flex items. Once you make an element a flex container, the display property on flex items is controlled by the flex algorithm. Attempts to set a display rule on flex items are ignored by the browser. That's what you're seeing in your code: display: inline-block is being ignored (but, again, technically not overridden, which is why inline-block is not crossed out).

这篇关于显示类型被未知来源覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！