Why is Firefox using the IE window model for input elements?

Try the following simple example:

<html>
<head>
<style>
  div,
  input {
    border: 1px solid #000;
    margin: 2px;
    padding: 3px;
    width: 100px;
  }
</style>
</head>
<body>
  <div>div</div>
  <input value="input" />
</body>
</html>

Please note that div and input data are of different widths. In fact, the input signal width is 92px. For input, Firefox calculates widths outside borders and indents, just as IE does for everything. Shouldn't he handle the input elements just like everything else, and add the registration and border to the width?

+3
source share
2 answers

As phihag says, it blocks vs inline.

However, a drawback with your example: you are not using DOCTYPE.

This means that the browser can render as best as possible.

<!DOCTYPE html> , HTML5 DOCTYPE, Quirks.

+3

- IE- . . (doctype) .

, div , input . display:block; , , display:inline;, . , Firefox .

+2

All Articles