html - 创建小按钮

Question

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

我的 CSS

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

IE 中的结果

Answer 1

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

尝试 在您的按钮 css 中添加padding和margin0

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

Answer 2

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

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

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

我认为要注意的重要一点是box-sizing参数。您可以在此处获得有关它的更多信息。当然，还有padding风格。