谷歌地图与 Chrome 中的引导字体 css 冲突答案

【问题标题】：Google maps conflicting with bootstrap font css in Chrome谷歌地图与 Chrome 中的引导字体 css 冲突
【发布时间】：2015-10-02 09:37:07
【问题描述】：

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

到目前为止，只有在页面中包含谷歌地图时才会在 Chrome 中出现确切的问题，并且当将焦点放在导航栏链接上时（通过单击或通过 chrome 开发工具），链接的颜色会变淡非常少量。

我已经尝试了许多通过研究发现的“修复”。仅举几例：

我一直在 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>

【问题讨论】：

标签： css twitter-bootstrap google-maps google-chrome

【解决方案1】：

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

【讨论】：

稍作调整后，这很有效（D52D2D 而不是B52D2D），需要保持颜色尽可能接近原始颜色。