您好，我正在这个网站 bamboo-intranet.com 上工作。最近我注意到菜单中的网站字体在 google chrome 浏览器上加载不正常，它在没有任何样式的情况下卡住，我一直在尝试解决这个问题但找不到问题所在。我想知道是否有人知道我的问题是什么。我还添加了我用于菜单的 css 样式和 html 语法，以便您可以查看是否有问题。
截图:
HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="es">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Bamboo - Intranet Software</title>
<meta name="description" content="Pequeñas, medianas y grandes compañías han implementado Bamboo Intranet como su plataforma de comunicación interna. Organizando, facilitando y agilizando dramáticamente las labores del día a día.">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:title" content="Bamboo - Intranet Software" />
<meta property="og:description" content="Pequeñas, medianas y grandes compañías han implementado Bamboo Intranet como su plataforma de comunicación interna. Organizando, facilitando y agilizando dramáticamente las labores del día a día." />
<meta property="og:url" content="http://bamboo-intranet.com" />
<meta property="og:image" content="http://bamboo-intranet.com/img/fbthumb.jpg"/>
<link href="img/favicon.png" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="css/normalize.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="skins/tango/skin.css" />
<link rel="stylesheet" href="css/sprites.css" />
<link rel="image_src" href="http://bamboo-intrantet/img/fbthumb.jpg" />
</head>
<body>
<!-- HEADER -->
<header class="step0">
<a href="http://bamboo-intranet.com/"><div class="logo"><img src="images/logo-bamboo.png" alt="Bamboo Intranet Software" /><h1>Bamboo - Intranet Software</h1></div></a>
<nav>
<ul>
<li>
<a href="#container">CARACTERÍSTICAS</a>
</li>
<li>
<a href="#screenshots">SCREENSHOTS</a>
</li>
<li>
<a href="#beta_test">VERSIÓN DE PRUEBA</a>
</li>
</ul>
</nav>
</header>
<!-- /HEADER -->
CSS 代码:
nav {
float: right;
height: auto;
margin: 10px 42px 10px 0;
width: auto;
}
nav ul {
padding: 0;
margin: 0;
}
nav li {
list-style: none;
float: left;
font-size: 13px;
color: #525252;
margin-right: 5px;
}
nav a {
text-decoration: none;
padding: 16px 14px;
border-radius: 4px;
line-height: 42px;
color: #767676;
transition: all .2s ease;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
font-family: 'Roboto', arial;
}
nav a:hover {
background-color: #262626;
color: #ffffff;
}
最佳答案
尝试更具体，
nav ul li {
list-style: none;
float: left;
font-size: 13px;
color: #525252;
margin-right: 5px;
}
nav ul li a {
text-decoration: none;
padding: 16px 14px;
border-radius: 4px;
line-height: 42px;
color: #767676;
transition: all .2s ease;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
font-family: 'Roboto', arial;
}
nav ul li a:hover {
background-color: #262626;
color: #ffffff;
}
如果那不能解决您的问题，请使用类，如果那不能解决您的问题，请在您的浏览器中使用检查元素选项并查看 CSS 对 HTML 的作用
你能发布一个网站链接吗？
关于html - 谷歌浏览器无法正确呈现字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18576252/