Which CSS property is responsible for the difference in appearance between two elements with identical CSS settings?

问题

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?

^{¹ As reported by Chrome's devtool.}
^{² 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.}

回答1:

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.

回答2:

Different elements have different default settings. There is an enormous amount of CSS in your demos, and it's largely overkill and very hard to determine where exactly the differences in rendering are coming from.

Have you tried a CSS reset instead? These will resolve most of the discrepancies between elements and browsers, giving you a blank slate to add your own styles.

回答3:

how can I determine the property (or properties) that account for the difference in appearance between the button and the div?

By clicking through them one by one and toggling them on and off in Dev Tools. If you turn off position:absolute on the middle class, you'll see what you're probably expecting in layout. I found this by clicking through all the properties in the Elements > Styles panel. See:

https://jsfiddle.net/vfdd9p8L/

This is probably a bug that you're encountering. Browsers have lots of them! By layering on so many styles at once, you're probably backing into a weird corner case with respect to the layout algorithms. To isolate the bug for help and/or reporting, try to create a reduced test case, which creates an unexpected discrepancy, but using the minimal number of elements and declarations.

(Also note that your fiddle is including jQuery CSS, which includes Normalize, which is a whole other layer of styling.)

来源：https://stackoverflow.com/questions/32217678/which-css-property-is-responsible-for-the-difference-in-appearance-between-two-e

标签

css

debugging