css - Chrome中锚内的边框颜色错误

Question

请看链接：

http://rogatka.eu/content/23-poradnik-gardena

在这些橙色框内，锚点应用了border-bottom:1px 虚线#fff（悬停时为实线）。但是，如您所见，边框的一部分不是白色的 - 它改为 #f3a889。什么可能导致这种行为？它仅出现在 Chrome 中。

HTML：

<div id="special1a">
   <h2><a title="Program do wyboru produktu" href="http://rogatka.eu/content/14-program-do-wyboru-produktu">Program do wyboru produktu &gt;&gt;&gt;</a></h2>
   <p>Czy potrzebują Państwo pomocy przy wyborze odpowiedniego produktu do pielęgnacji trawnika, drzew i krzewów?</p>
</div>
<div id="special1b">
   <h2><a title="Wybór właściwej pompy" href="http://www.gardena.com/pl/support/planners-and-guides/pump-guide/">Wybór właściwej pompy &gt;&gt;&gt;</a></h2>
   <p>Wypompowywanie, nawadnianie czy zaopatrywanie domu w wodę: wybierz pompę GARDENA spełniającą Twoje potrzeby.</p>
</div>
<div id="special1c">
   <h2><a title="Programy do projektowania" href="http://rogatka.eu/content/16-programy-do-projektowania">Programy do projektowania &gt;&gt;&gt;</a></h2>
   <p><a title="Projektowanie Micro-Drip" href="http://www.gardena.com/pl/support/planners-and-guides/micro-drip-planner/">Projektowanie Micro-Drip</a></p>
   <p><a title="Projektowanie Sprinklersystem" href="http://mygarden.gardena.com/pl/">Projektowanie Sprinklersystem</a></p>
</div>

CSS：

#special1a {
    background:#E75012 url(../img/bgSpecial1a.png) 796px center no-repeat;
    color:#fff;
    padding:20px 192px 20px 20px;
    margin:0 0 20px;
}
#special1b {
    background:#E75012 url(../img/bgSpecial1b.png) 796px center no-repeat;
    color:#fff;
    padding:20px 192px 20px 20px;
    margin:0 0 20px;
}
#special1c {
    background:#E75012 url(../img/bgSpecial1c.png) 796px center no-repeat;
    color:#fff;
    padding:20px 192px 20px 20px;
}
#special1a h2, #special1a h2 a, #special1a p, #special1a p a, #special1a p a:hover, #special1b h2, #special1b h2 a, #special1b p, #special1b p a, #special1b p a:hover, #special1c h2, #special1c h2 a, #special1c p, #special1c p a, #special1c p a:hover {
    color:#fff !important;
}
#special1a h2 a, #special1a h2 a:link, #special1a h2 a:visited, #special1a p a, #special1a p a:link, #special1a p a:visited, #special1b h2 a, #special1b h2 a:link, #special1b h2 a:visited, #special1b p a, #special1b p a:link, #special1b p a:visited, #special1c h2 a, #special1c h2 a:link, #special1c h2 a:visited, #special1c h2 a, #special1c h2 a:link, #special1c h2 a:visited {
    color:#fff !important;
    border-bottom:1px dashed #fff;
}
#special1a h2 a:hover, #special1a p a:hover, #special1b h2 a:hover, #special1b p a:hover, #special1c h2 a:hover, #special1c p a:hover {
    color:#fff !important;
    border-bottom:1px solid #fff;
}
#special1a p, #special1b p, #special1c p {
    margin:0 !important;
    font-family: 'MyriadPro-Light' !important;
    font-size:21px !important;
    line-height:140% !important;
    -webkit-transform:rotate(-0.03deg);
}
#special1a h2, #special1b h2, #special1c h2 {
    font-family: 'MyriadPro-Bold' !important;
    -webkit-transform:rotate(-0.03deg);
}

Answer 1

您正在稍微旋转标题（为什么？）

#special1a h2, #special1b h2, #special1c h2 {
    font-family: 'MyriadPro-Bold' !important;
    -webkit-transform:rotate(-0.03deg);
}

去掉旋转，你会没事的。