{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 时光不老，我们不散 的问题《Why does Firefox use the IE box model for input el》','https://www.manongdao.com/q-591529.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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>
Notice the div and the input gets different widths. In fact, the width of the input is 92px. For the input, Firefox calculates the width outside the border and padding, the same way IE does for everything. Shouldn't it treat input elements the same as everything else, and add the padding and border to the width?
As phihag says, it's block vs inline.
However, a flaw with your example: you're not using a DOCTYPE.
That means the browser is free to render as it sees fit.
Stick
<!DOCTYPE html>at the top to use the nice and compact HTML5 DOCTYPE, which will prevent browsers from going into Quirks Mode.The width issue is a result of brain-dead IE-compatible quirks mode. See Peter Boughton's answer(doctype) for remedy.
Additionally,
divis a block-level element, butinputisn't. Adddisplay:block;to your rule to achieve the div rendering in both cases, ordisplay:inline;to format both elements as inline. However, Firefox will forgive top-level inline elements and render them appropriately.