创建小按钮

Question

我正在尝试制作一个11px×11px的按钮，但似乎我尝试的每个浏览器的按钮最小宽度为12px（IE9除外，它的尺寸为16px）。有没有办法解决这个问题，还是需要使用锚标签？

我的CSS

#testButton
{
    background-image: url(images/Sprites.png);
    width: 11px;
    height: 11px;
    border: 0 none transparent;
}

IE中的结果

Answer 1

每个浏览器都有一些默认的CSS。尝试使用 css reset

尝试在按钮css中将padding和margin添加到0

#testButton
{
    background-image: url(images/Sprites.png);
    width: 11px;
    height: 11px;
    border: 0 none transparent;
    padding:0;
    margin:0;
}

Answer 2

好的，这么有趣的问题。我一直在玩here。我在这里在Mac上运行Safari。

对我来说，这个（我认为）适用于一个简单的<button></button>元素：

button {
  width: 2px;
  height: 2px;
  padding: 0px;
  box-sizing: border-box;
  border: 0;
  background: red;
}

我认为需要注意的重要事项是box-sizing参数。您可以获得有关它的更多信息here。当然还有padding风格。