谷歌地图冲突与引导字体css在Chrome浏览器

Question

首先，我在大多数主流浏览器中测试了下面的代码;Chrome、Firefox、IE和Safari

确切的问题到目前为止只发生在Chrome当谷歌地图被包含在页面中，这是，当给予焦点导航条链接(无论是通过点击或通过Chrome开发工具)，链接的颜色褪色非常轻微的量。

我已经尝试了许多"修复"，我已经通过研究发现。举几个例子:

• 为什么嵌入式谷歌地图会改变Safari's字体渲染?
• Google Maps v3 -防止API加载Roboto字体
• Bug: visualRefresh导致Roboto网页字体被重新加载/重新定义

我一直在Chrome v43.0.2357.132 m上做我所有的测试(保存前面提到的浏览器)。

对于我还没有真正问过的问题，有人知道这个问题的修复或解决方法吗?

var map;
function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 8,
    center: {lat: -34.397, lng: 150.644}
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

#map-canvas {
    height: 400px;
    margin-top: 51px;
    width: 100%;
}
nav a.navbar-brand, nav a span, nav a {
  color: #C52D2D !important;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">    
      <ul class="nav navbar-nav">
        <li>
          <a href="#">Link 1</a>
        </li>
        <li>
          <a href="#">Link 2</a>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<div id="map-canvas"></div>

Answer 1

将此添加到您的a链接text-shadow:0 1px 2px rgba(0,0,0,.9);filter:alpha(opacity=90);opacity:.9;演示:http://po0.co.uk/daed.php