拉门HTML按钮

我有以下的HTML实现滑动门技术，在一切，但Safari浏览器看起来正常的Windows按钮：拉门HTML按钮

<button type="submit"> 
    <span>Button</span> 
</button>

这是对应的CSS：

button { 
    background:url("../images/sprBgBtn.png") no-repeat right -47px; 
    border:0; 
    cursor:pointer; 
    font-weight:bold; 
    height:27px; 
    line-height:27px; 
    overflow:visible; 
    padding:0 26px 0 0; 
    position:relative; 
    text-align:center; 
    text-transform:uppercase; 
    width:auto; 
} 

button::-moz-focus-inner { 
    border: none; /* overrides extra padding in Firefox */ 
    padding:0; 
} 

button span { 
    background:url("../images/sprBgBtn.png") no-repeat left top; 
    display:block; 
    height:27px; 
    line-height:27px; 
    padding:0 0 0 26px; 
    position:relative; 
    white-space:nowrap; 
}

如果我省略了下面的代码，那么同样的问题会出现在FFOX中：

button::-moz-focus-inner { 
    border: none; /* overrides extra padding in Firefox */ 
    padding:0; 
}

来源

2010-10-11 RyanP13

它出现在右填充为Chrome的减少和Safari浏览器解决了这个问题：

/* Safari and Google Chrome only - fix margins */ 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
    #icis_dashboard .submit_btn, 
    #colorbox .submit_btn 
    { 
     padding:0 23px 0 0;  
     } 

    #icis_dashboard .submit_btn span, 
    #colorbox .submit_btn span { 
     margin-top: -1px; 
    } 
}

来源

2010-10-12 12:36:23 RyanP13

我的猜测是按钮，被默认为一个内联元素（除非你的代码，这里不是推翻它的显示性能别的地方），可能不喜欢内宽度被设置为禁止，在Safari窗口这样意外的行为（和我” d假设其他的webkit浏览器，除非在Mac版本或谷歌Chrome浏览器上有safari的Windows版本特别特殊的东西）。

来源

2010-10-11 20:51:12

按钮是另一只内联元素内使用时的内联元素这里并不是这种情况。 – RyanP13 2010-10-11 21:05:47

好的。你碰巧知道这是否发生在另一个像Chrome浏览器的浏览器中？如果没有，那么可能是有一种解决方案被整合到了一个webkit版本中，而不是一个内置于您的特定Safari版本的版本？ – 2010-10-11 21:16:46

这也恰好我在Safari 5.0.3赢。在Safari Mac 5.0.3或Chrome Win/Mac 8+上不会发生。

因为它只能在Safari浏览器的Windows不工作我在一个损失如何“破解它”使用负利润率...

来源

2011-01-15 22:47:45

拉门HTML按钮

回答

相关问题