這個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發生了什麼？我找不到它

回答

相關問題