为什么一个div和一个按钮具有相同的样式呈现在不同的大小？ [英] Why do a div and a button with the same styles render at different sizes?

问题描述

我有一个包含一些可点击的< div> 元素的页面，我想将其更改为< button> s，以便更容易通过jQuery识别它们。但是当我将< div> 更改为< button> （我将它们设置为固定的宽度和高度，但按钮的宽度和高度不同于div。）

这里是一个jsfiddle重现问题： http://jsfiddle.net/AjmGY/

这里是我的CSS ：

  .styled {
 border：4px solid black; 
 background：blue; 
 width：100px; 
 height：100px; 
} 
  

而我的HTML：

 < div class =styled>< / div> 
< button class =styled>< / button> 
  

我希望看到两个相同大小的盒子，但底部盒子（< button> ）明显更小。这个行为在我尝试的所有浏览器上都是一致的，Windows（Chrome，FireFox，IE，Opera）和Android（内置浏览器和Dolphin）。

我尝试添加 display：block; 到样式，认为这可能使它们都使用相同的规则呈现（即，使按钮渲染像一个 div ，因为它是一个块元素现在），但没有效果 - 按钮保持较小。

当我增加边框宽度，差异增加。看起来好像按钮的 border 是 其宽度，而不是上方其< div> 的 width 据我所知，这违反了框模型，虽然W3C说：

用户代理可能

p> 按钮是否正常/记录/预期行为使其边框在其宽度和高度的内部，而不是外部？我可以依靠这种行为吗？

（我的页面使用HTML5的doctype，如果相关。）

解决方案

按钮和其他输入控件使用边框框模型;即content，padding和border全部加起来是你声明的 width 的总和。他们也经常有浏览器根据他们的默认样式表任意添加一些填充。正如你所引用的，这是可以接受的行为，而不是违反标准;

为了使你的按钮的大小与您的 div ，根据内容框模型（即原始W3C框模型）将其大小设置为零，并填充其填充：

  button.styled {
 -moz-box-sizing：content-box; 
 -webkit-box-sizing：content-box; 
 box-sizing：content-box; 
 padding：0; 
} 
  

jsFiddle demo

I have a page with some clickable <div> elements, and I want to change them to <button>s instead to make it easier to identify them via jQuery. But when I change the <div>s to <button>s, their size changes. (I'm styling them as fixed width and height, but the button renders at a different width and height than the div does.)

Here's a jsfiddle that reproduces the problem: http://jsfiddle.net/AjmGY/

Here's my CSS:

.styled {
    border: 4px solid black;
    background: blue;
    width: 100px;
    height: 100px;
}

And my HTML:

<div class="styled"></div>
<button class="styled"></button>

I would expect to see two boxes of identical size, but the bottom box (the <button>) is noticeably smaller. This behavior is consistent across all the browsers I tried it on, both Windows (Chrome, FireFox, IE, Opera) and Android (built-in browser and Dolphin).

I tried adding display: block; to the style, thinking that that might make them both render using the same rules (i.e., make the button render like a div since it's a block element now), but that had no effect -- the button remained smaller.

As I increase the border width, the disparity increases. It looks as though the button's border is inside its width, rather than above and beyond its width as with the <div>. As far as I understand it, this violates the box model, though the W3C does say:

user agents may render borders for certain user interface elements (e.g., buttons, menus, etc.) differently than for "ordinary" elements.

Is it normal / documented / expected behavior for a button to have its border on the inside of its width and height, rather than outside? Can I rely on this behavior?

(My page uses an HTML5 doctype, if that's relevant.)

解决方案

Buttons and other input controls are rendered using the border-box model by default; i.e. content, padding and border all add up to the total width that you declare. They also often have some padding added by browsers arbitrarily according to their default stylesheets. As you quote, this is acceptable behavior and not a violation of standards; it's simply to accommodate rendering of OS-level GUI controls.

To get your button to be the same size as your div, size it according to the content-box model (which is "the" original W3C box model) and zero out its padding:

button.styled {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    padding: 0;
}

jsFiddle demo

这篇关于为什么一个div和一个按钮具有相同的样式呈现在不同的大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！