Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to solve the problem of high inconsistency in css". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how css solves the problem of high inconsistency".

Css solutions to high inconsistencies: 1, add "box-sizing: border-box;" to input; 2, add "box-sizing: content-box;" to button.

This article operating environment: windows7 system, HTML5&&CSS3 version, Dell G3 computer.

How does css address high inconsistencies?

The causes and Solutions of the High inconsistency between input and button in css

First of all, talk about the reasons for the high degree of inconsistency between input and button.

When I was studying the react project and writing todolist, I encountered such a small problem. After consulting some materials, I found that there were all kinds of things on the Internet. After consulting the data, I found that the misalignment was due to the different baselines of the elements in the line, so it would lead to different levels. The solution is also simple enough to add ↓ to each element.

Vertical-align:middle;.target {vertical-align:middle; width: 200px; height: 30px; border: 1px solid # ccc; box-sizing: border-box;}. Red-btn {vertical-align:middle; width: 100px; height: 30px; background: lightcoral; color: # fff;}

Add

{this.getTodoItems ()}

Then talk about why the height of input is two pixels higher than that of button.

Button always uses Quirks mode for height calculation. In Quirks mode, the border is calculated within the width of the element, not on the outside as in standard mode (the height of the button contains the height of the border, while the text box text does not include the height of the border. )

The solution is also simple: add ↓ to input.

Box-sizing: border-box

Or add ↓ to button.

Box-sizing: content-box

At this point, I believe you have a deeper understanding of "how css solves the problem of high inconsistency". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.