2016-02-22 32 views
0

在我的網站上,我有一些頁腳鏈接顯示訪問鏈接時iOS設備的邊框顏色錯誤。這發生在iOS版的Chrome和Safari上。iOS a:訪問的鏈接顯示默認的紫色

桌面

enter image description here

的iOS

enter image description here

我搜索過我的代碼,我沒有在任何地方設置這種風格。 我曾嘗試在小提琴/ codepen中重現此操作,但由於它們不讓您重定向,因此我無法看到a:visited在移動設備上的外觀。

代碼

.productsalessection { 
 
    width: 34%; 
 
    padding-top: 10px; 
 
    padding-right: 1%; 
 
    padding-bottom: 10px; 
 
    float: left; 
 
    font-family: Lato, sans-serif; 
 
} 
 

 
.productsalesbox { 
 
    width: 100%; 
 
    padding: 14px 12px; 
 
    float: left; 
 
    border-right: 1px solid #e2e2e2; 
 
} 
 

 
.productsalesbadge { 
 
    width: 80px; 
 
    height: 100%; 
 
    margin-right: 6px; 
 
    float: left; 
 
    border: 1px solid #ddd; 
 
    border-radius: 4px; 
 
    background-color: white; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
} 
 

 
.productsalesheading { 
 
    margin-top: 3px; 
 
    color: #444; 
 
    font-size: 16px; 
 
    font-weight: 400; 
 
    text-transform: uppercase; 
 
} 
 

 
.productsalestext { 
 
    font-size: 12px; 
 
    line-height: 14px; 
 
    color: #777; 
 
}
<a class="w-clearfix productsalessection" target="_blank" href="http://www.google.com"> 
 
    <div class="w-clearfix productsalesbox"> 
 
    <div class="productsalesbadge"><img src="http://www.chicmarket.com/images/SJ.svg"> 
 
    </div> 
 
    <div class="productsalesheading">Trusted</div> 
 
    <div class="productsalestext">We proudly maintain a strong relationship with our customers.</div> 
 
    </div> 
 
</a>

改變a:visited作品的顏色。

a:visited { 
    color: #C8C8C8; 
} 

但是這種解決方案並不理想,因爲這會混淆我網站上的其他標籤。

我也試過了。

a:visited { 
    color: rgba(0, 0, 0, 0.0); 
} 

但不是讓顏色變成透明的,而是讓邊框變黑。

我通常不會將鏈接發佈到外部網站,但如果您想自己查看並查看問題,可以查看here

是否有這個不需要我來設置a:visited顏色爲每個我有一個標籤一個簡單的解決?

回答

0

看起來這只是發生在的div的邊界移動<a>標籤內。爲了解決這個問題,我不得不爲a:visited設置color: rgba(0, 0, 0, 0.0);,但我不得不選擇具有邊框的特定div。

a:visited .productsalesbadge { 
    color: rgba(0, 0, 0, 0.0); 
} 

這完全消除了我在手機上看到的紫色訪問邊界。