0

在以下代码中：

<p><input type="checkbox" /> Pavement
<input type="checkbox" /> Dirt or rocky trails
<input type="checkbox"/> Gravel roads</p>

以及以下 CSS：

h1, input, button, textarea, progress, p, a, ul, li {
    font-family: "Open Sans", sans-serif;
    font-size: 10pt;
    color: #666;
    letter-spacing: normal;
    text-indent: 0;
    text-shadow: 0 1px 0 hsla(0,0%,100%,.75);
    margin: 10px 2px;
}

input[type="checkbox"], input[type="radio"] {
    background-color: #f4f4f4;
    background-image: -webkit-linear-gradient(90deg, hsla(0,0%,0%,.05), hsla(0,0%,0%,.01));
    box-shadow: inset 0 1px 0 hsla(0,0%,100%,.5),
                0 1px 2px hsla(0,0%,0%,0.5);
    border: none;
    cursor: pointer;
    height: 16px;
    width: 16px;
    position: relative;
    -webkit-appearance: none;
}

复选框似乎几乎是关于其他文本的一行。我尝试删除所有CSS 并解决了问题（当我删除所有自定义复选框样式时问题也解决了），但是当我开始逐行删除/替换 CSS 时，我找不到问题。有任何想法吗？谢谢！

4

2 回答 2

1

这是你的问题：

margin: 10px 2px;

摆脱它，你就是金子

或者，如果您想将其保留在某些元素上，而不是复选框和单选按钮上，您可以执行以下操作

h1, input, button, textarea, progress, p, a, ul, li {
  ...
  margin: 10px 2px;
}
input[type="checkbox"], input[type="radio"] {
  ...
  margin: 0px 2px;
}​
于 2012-12-28T19:29:25.360 回答
0

添加vertical-align: middle;到您的复选框应该可以解决它。

IE

input[type="checkbox"], input[type="radio"] {
...
   vertical-align: middle;
}
于 2012-12-28T19:30:35.220 回答