出現的文本週圍的鍍鉻而不是其他瀏覽器

我用我的色彩改變標題文本的代碼（我也用我的色彩變化按鈕相同的代碼）不需要箱創建圍繞Chrome中的文本不必要的輪廓，但在其他瀏覽器（IE，Edge，Firefox）只顯示文本（這是預期的）。出現的文本週圍的鍍鉻而不是其他瀏覽器

我認爲這可能是因爲我使用的按鈕相同的代碼，以及作爲標題。但是，如果是這樣的話，那麼我不知道是什麼原因造成的代碼來表現不同的Chrome，但好於其他瀏覽器。

該網站在這裏上傳： http://www.maximiles.co.uk/images/dynamics/uk/bilendiloyalty3/index.html

我codepen是在這裏： http://codepen.io/Dingerzat/pen/BQZGLe

的顏色改變代碼：

<!-- html --> 
<h2 class="color_button">We enhance brand loyalty</h2>

。

/* CSS */ 
.enquire_button { 
    min-height: 2em; 
    width: 7em; 
    background-color: white; 
    border: 4px solid #f35626; 
    border-radius: 5px; 
    color: #f35626; 
    cursor: pointer; 
    font-size: 2em; 
line-height: 2em; 
    -webkit-transition: color .4s; 
    -o-transition: color .4s; 
    transition: color .4s; 
    -webkit-animation: hue 60s linear; 
    -o-animation: hue 60s linear; 
    animation: hue 60s linear; 
    text-align: center; 
} 
.color_button { 
    animation-name: color_change; 
    animation-duration: 10s; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
} 
@-webkit-keyframes color_change { 
    0% { color: #da6e16; border: 4px solid #da6e16; } 
    25% { color: #82da16; border: 4px solid #82da16; } 
    50% { color: #16dad0; border: 4px solid #16dad0; } 
    75% { color: #d41a82; border: 4px solid #d41a82; } 
    100% { color: #d41a82; border: 4px solid #d41a82; } 
} 
@-moz-keyframes color_change { 
    0% { color: #da6e16; border: 4px solid #da6e16; } 
    25% { color: #82da16; border: 4px solid #82da16; } 
    50% { color: #16dad0; border: 4px solid #16dad0; } 
    75% { color: #d41a82; border: 4px solid #d41a82; } 
    100% { color: #d41a82; border: 4px solid #d41a82; } 
} 
@-ms-keyframes color_change { 
    0% { color: #da6e16; border: 4px solid #da6e16; } 
    25% { color: #82da16; border: 4px solid #82da16; } 
    50% { color: #16dad0; border: 4px solid #16dad0; } 
    75% { color: #d41a82; border: 4px solid #d41a82; } 
    100% { color: #d41a82; border: 4px solid #d41a82; } 
} 
@-o-keyframes color_change { 
    0% { color: #da6e16; border: 4px solid #da6e16; } 
    25% { color: #82da16; border: 4px solid #82da16; } 
    50% { color: #16dad0; border: 4px solid #16dad0; } 
    75% { color: #d41a82; border: 4px solid #d41a82; } 
    100% { color: #d41a82; border: 4px solid #d41a82; } 
} 
@keyframes color_change { 
    0% { color: #da6e16; border: 4px solid #da6e16; } 
    25% { color: #82da16; border: 4px solid #82da16; } 
    50% { color: #16dad0; border: 4px solid #16dad0; } 
    75% { color: #d41a82; border: 4px solid #d41a82; } 
    100% { color: #d41a82; border: 4px solid #d41a82; } 
}

來源

2016-12-06 Schro

這CodePen呈現的代碼了很多。 [你可以減少它歸結爲代碼的最低金額仍然能夠重現該問題（https://stackoverflow.com/help/mcve）？ –

把'h2 {border：0！important; }'，看看是否能解決問題 - 這是在color_change關鍵幀動畫 – junkfoodjunkie

喜@junkgoodjuunkie邊境，我想你的建議，但似乎仍然這樣做。對不起，桑迪吉福德，我會盡量減少代碼。 – Schro

添加邊框.color_button類

.color_button 
{ 
    border:solid;

來源

2016-12-06 14:54:57 selami

嘗試了你的建議，似乎仍然在做。 – Schro

在你的關鍵幀，僅申報邊框顏色，而不是整個邊框樣式。然後，在使用相同的關鍵幀，需要一個邊界的任何其他元素，確保原始元素具有適當的寬度的邊框樣式。

@keyframes color_change { 
    0% { color: #da6e16; border-color:#da6e16; } 
    25% { color: #82da16; border-color:#82da16; } 
    50% { color: #16dad0; border-color:#16dad0; } 
    75% { color: #d41a82; border-color:#d41a82; } 
    100% { color: #d41a82; border-color:#d41a82; } 
}

（加上當然在所有的供應商前綴樣式。同其他城市）

來源

2016-12-06 15:49:57 andi

出現的文本週圍的鍍鉻而不是其他瀏覽器

回答

相關問題