Question

我正在尝试对齐复选框。当我给出

margin-left : 10px; //proper with IE

它在IE中正确对齐。

如果我给

margin-left : 15px; //proper with chrome

适用于chrome。

有没有办法解决这个问题，以便在两个浏览器中得到正确的对齐？

Answer 1

如果您没有使用normalize.css之类的内容，我会推荐它。这将允许您拥有跨浏览器“空白平板”，这样您就不需要为某些浏览器制作特定样式。如果无法将整个重置样式表合并到项目中，请复制相应的样式：

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

然后选择您最喜欢的对齐复选框的方式。

类似的东西：

input[type=checkbox], input[type=radio] {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
}
input[type=radio] {
    bottom: 2px;
}

这是一个实例：

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

input[type=checkbox], input[type=radio] {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
}
input[type=radio] {
    bottom: 2px;
}

<label><input type="checkbox"> hello</label>

Answer 2

好吧，试试-webkit-margin-left:10px;＆amp; -moz-margin-left:10px;

Answer 3

您可以为IE添加另一个样式表，您可以在其中更改正确的值。

<link rel="stylesheet" href="normal-styles.css" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet"  href="ie-fixes.css" type="text/css" />
<![endif]-->

Answer 4

它们是针对特定浏览器的设置样式的单独hack代码，

例如，

假设checkBoxElement是复选框输入元素的类

mozilla firefox

@-moz-document url-prefix() {
.checkBoxElement{
    margin-left : 10px; 
  }
}

Chrome和Safari

.checkBoxElement{
   -webkit-margin-before:10px;
}

IE和safari

::-ms-backdrop, .checkBoxElement {
    margin-left: 10px;
}

仅

仅限于Safari

 ::i-block-chrome, .checkBoxElement {
        margin-left: 10px;
    }

or 

    ::i-block-chrome, .checkBoxElement {
        -webkit-margin-before: 10px;
    }

css margin-left propery - 如何为各种浏览器指定

4 个答案: