这个CSS3发生了什么？我找不到它

我做了一些按钮，有一些效果。当我在浏览器中测试时，它只能在Mozilla中正常工作。我无法找到，为什么没有在-webkit-浏览器工作有谁能够告诉我，为什么这个代码不工作检查此琴http://jsfiddle.net/sarfarazdesigner/Qtw3x/这个CSS3发生了什么？我找不到它

这里是HTML代码，

<button name="feat-btn" id="feat-btn" class="push-button" type="submit"> 
    <span>Submit</span> 
</button>

这里是CSS

.push-button { 
    background: none repeat scroll 0 0 transparent; 
    border: medium none; 
    color: #FFFFFF; 
    cursor: pointer; 
    display: inline-block; 
    font-size: 18px; 
    padding: 0; 
    text-align: center; 
    text-decoration: none; 
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); 
} 
.push-button span:after { 
    -moz-border-bottom-colors: none; 
    -moz-border-left-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-top-colors: none; 
    border-color: #357536 transparent -moz-use-text-color; 
    border-image: none; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-style: solid solid none; 
    border-width: 5px 5px 0; 
    content: ""; 
    display: block; 
    margin: 0 -1.7em; 
    overflow: hidden; 
    text-indent: -9999px; 
} 
.push-button span:before { 
    border-radius: 8px 8px 8px 8px; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); 
    content: "."; 
    display: block; 
    height: 55px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index: -1; 
} 
.push-button span { 
    background-color: #4FB051; 
    border-bottom: 1px solid #6FBE70; 
    display: inline-block; 
    height: 49px; 
    line-height: 50px; 
    margin-bottom: 5px; 
    min-width: 110px; 
    padding: 0 1.7em; 
    position: relative; 
} 
.push-button:hover span{background-color:#52a853;}

首先检查它mozilla，那么你了解它是如何将看起来或者你可以看到下面 THI图像s的期待在mozilla enter image description here

，这是寻找在WebKit浏览器 enter image description here

来源

2013-05-07 The Mechanic

为什么在按钮内部有一个“span”标签？为什么不只是在打开和关闭'button'标签中有纯文本？ – zuallauz 2013-05-07 05:23:46

@zuallauz用于放置效果，比如3d – 2013-05-07 05:26:01

更重要的是您为什么使用非标准的边框颜色属性？ – BoltClock 2013-05-07 09:40:47

奇怪的事情发生的事情与你border-color在.push-button span:after选择

border-color: #357536 transparent -moz-use-text-color;

只是将其更改为#357537

jsFiddle

border-color: #357536;

适用于Chrome和Firefox的变化。

来源

2013-05-07 05:22:03

添加到Daniel的答案中：'-moz-use-text-color'似乎会导致您的样式中断。你不应该使用它，因为它已被[弃用]（https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions#border-color）。使用'currentColor'代替它在Chrome上不会中断。 – 2013-05-07 05:29:42

y它现在工作正常，谢谢 – 2013-05-07 05:33:17

@Vimal Stan：不喜欢它曾经打算在Web样式表中使用的第一个地方... – BoltClock 2013-05-07 09:41:17

从线

border-color: #357536 transparent -moz-use-text-color;

我没有看到任何更改删除

transparent -moz-use-text-color

，但工作得很好。结果是：

border-color: #357536;

来源

2013-05-07 05:31:53

烨，当我删除上面的行它工作正常 – 2013-05-07 05:36:08

这个CSS3发生了什么？我找不到它

回答

相关问题