Question

您好我正在本网站bamboo-intranet.com上工作。最近我注意到菜单中的网站字体在谷歌浏览器浏览器上加载不好，它没有任何风格卡住，我一直试图解决这个问题，但找不到什么错误。我想知道是否有人知道可能是我的问题。我还添加了用于菜单和html语法的css样式，以便您可以查看是否有错误。

截图： enter image description here

HTML code：

<!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;
}

Answer 1

尝试更具体，

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;
}

如果这不能解决您的问题，请使用类，如果这不能解决您的问题，请使用浏览器中的inspect元素选项，看看CSS在HTML上的作用

您可以发布指向该网站的链接吗？

Google Chrome无法正确呈现字体

1 个答案: