哪个CSS属性负责具有相同CSS设置的两个元素之间的外观差异？ [英] Which CSS property is responsible for the difference in appearance between two elements with identical CSS settings?

问题描述

下面的HTML指定了具有相同类和内容的按钮和 div 。

 < div class =root><！ -  
  - >< button class = >< div class =middle>< div class =inner> label< / div>< / div>< / button><！ -  
  - > < div class =outer>< div class =middle>< div class =inner> label< / div>< / div>< / div> -  
  - >< / div> 
  

在此示例，我已为外部显示 显示设置每个CSS属性 code>， middle 和 inner 2 。 b
$ b

这意味着 button.outer 和 div.outer DOM的树应具有完全相同的CSS设置 。也许，除了提供的样式表之外，这些元素的CSS属性都不会从其他任何地方获取值。

如示例显示，并排的按钮和 div 看起来很不同。具体来说，在按钮中，标签显示在元素的底部，而在 div 。 （在两种情况下，标签水平居中。另外，请注意，所有类都具有 vertical-align：middle 的设置。）

我已经观察到这个差异与我迄今为止测试的所有浏览器（Chrome和Firefox）。

由于样式表设置没有区别对于 button.outer 和 div.outer 元素及其后代，我认为它们的外观的差异由于某些CSS属性具有一个值（如 auto 或 normal ），上下文是按钮还是 div 元素。

为了按钮和 div

我的长期目标是让CSS编码更具可预测性。目前，我发现我的CSS因为严重不一致（如示例中所示）而非常不稳定。

我的问题是：

如何在按钮和 div之间








---

<sup>1 Chrome的devtool报告。


2 我将这些设置的绝大部分值Chrome的devtool的上市。要点是确保按钮和 div 元素具有相同的设置（无论是什么）每个CSS属性。</sup>

解决方案

这可能是由于 auto 用于按钮内的元素位置。如果您扩大 div 的大小，内容将默认位于左上角。

由于按钮的顶部和 left 的值为 auto 是居中而不在左上角，您可以重置顶部和左侧总是像一个典型的div。这些是在 .middle 上更改的属性：

  .middle { 
 top：0; 
 left：0; 
} 
  

这是 forked JSFiddle 改变 .middle 。

The HTML below specifies a button and a div that have identical class and contents.

<div class="root"><!--
--><button class="outer"><div class="middle"><div class="inner">label</div></div></button><!--
--><div    class="outer"><div class="middle"><div class="inner">label</div></div></div   ><!--
--></div>

In this example, I have explicitly set every CSS property¹ for the classes outer, middle, and inner².

This means that both the button.outer and div.outer sub-trees of the DOM should have completely identical CSS settings. Presumably, as well, no CSS properties for these elements are getting their values from anywhere else besides the provided stylesheet.

As the example shows, the side-by-side button and div look quite different. Specifically, in the button, the label appears at the bottom of the element, whereas in the div it is vertically centered. (The label is centered horizontally in both cases. Also, note that all the classes have the setting vertical-align: middle.)

I have observed this difference with all the browsers I've tested so far (Chrome and Firefox).

Since there is no difference in the stylesheet settings for the button.outer and div.outer elements, and their descendants, I figure that the difference in their appearance is due to some CSS property with a value (such as auto or normal) that gets interpreted differently by the browser depending on the whether the context is a button or a div element.

My immediate goal here is to understand sufficiently well why the button and the div are being rendered differently so that I can adjust the CSS intelligently.

My longer term goal is to make CSS coding more predictable. Currently I find that my CSS is completely unstable due to gross inconsistencies like the one shown in the example.

My question is:

how can the difference in appearance between the button and the div be explained?

---

^{1 As reported by Chrome's devtool.
2 I took the vast majority of the values for these settings from Chrome's devtool's listings. The point was to ensure that both the button and the div elements had the same setting (whatever it may be) for each CSS property.}

解决方案

This is likely due to different meanings for the value of auto for the position of elements inside of a button. If you expand the size of a div, the content by default will be in the top-left corner. If you do the same for a button, the content will be centered horizontally and vertically.

Since the button's top and left values for auto is to be centered and not in the top left corner, you can reset top and left to always act like a typical div would. These are the properties to change on .middle:

.middle {
    top: 0;
    left: 0;
}

Here's the forked JSFiddle with those changes to .middle.

这篇关于哪个CSS属性负责具有相同CSS设置的两个元素之间的外观差异？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！