小编use*_*592的帖子

我正在尝试使我的按钮在应用时<a>或<input>(至少在chrome中)看起来正确.然而,输入向下移动1px但我真的不知道为什么.

我试图覆盖来自浏览器的所有样式,但它不起作用.

我知道我可以通过位置相对或其他东西来提升它,但这不是我正在寻找的解决方案,我想知道1px来自哪里.

HTML:

<a class="button" href="#">link button</a>
<input class="button" value="input button" type="button" />

CSS:

.button {
    display: inline-block;
    text-align: center;
    margin: 0 0 24px 0;
    border: 1px solid #000;
    padding: .3em .6em;
    background: #ccc;
    color: #000;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 16px;
    font-family: inherit;
    line-height: 1;
}

在这里演示:http://codepen.io/wfmarc/pen/uHhvJ

我想在Jade中创建一个按钮mixin.但是我不知道哪些html元素我将应用那些mixin,例如a,按钮或输入.

我的问题:是否可以从mixin中选择元素？例如,将其称为+按钮或输入+按钮

或者使用元素参数来插入带有mixin的元素

mixin button(element, style, size, expand, fill, round, simple)
    - var style = (typeof href === 'undefined') ? '' : style
    - var fill = (typeof fill === 'undefined') ? '' : 'btn-fill'
    - var expand = (typeof expand === 'undefined') ? '' : 'btn-block'
    - var round = (typeof round === 'undefined') ? '' : 'btn-round'
    - var simple = (typeof simple === 'undefined') ? '' : 'btn-simple'
    case size
        when "large"
            - size = "btn-lg"
        when …