Html Div只有在铬中才会发生奇怪的反应_Html_Css_Google Chrome_Styles_Navbar

Html Div只有在铬中才会发生奇怪的反应

html css google-chrome

Html Div只有在铬中才会发生奇怪的反应,html,css,google-chrome,styles,navbar,Html,Css,Google Chrome,Styles,Navbar,我正在创建一个网页，css和html非常简单。然而，在Chrome中，仅在100%缩放时，当我将鼠标悬停在导航栏项目上时，容器div颜色的一小部分保持不变。如果更改缩放级别或使用其他浏览器，则不会出现此效果。任何想法：代码如下 HTML: 示例（Chrome）：例如：你的在你的之外。我不知道你是什么，我在Chrome 56.0中使用了这个确切的代码。问题可能是由于您正在加载的图像造成的，但我们无法看到这些图像。 <html> <head> <li

我正在创建一个网页，css和html非常简单。然而，在Chrome中，仅在100%缩放时，当我将鼠标悬停在导航栏项目上时，容器div颜色的一小部分保持不变。如果更改缩放级别或使用其他浏览器，则不会出现此效果。任何想法：代码如下

HTML:

示例（Chrome）：

例如：

你的

在你的

之外。我不知道你是什么，我在Chrome 56.0中使用了这个确切的代码。问题可能是由于您正在加载的图像造成的，但我们无法看到这些图像。

 <html>
 <head>
     <link rel="stylesheet" type="text/css" href="main.css">
     <title>Site Title</title>
 </head>
 <body>
     <div class="img_div" id="visible_div1">
         <a href=""><img src="images/logo_transparent.png" class="logo_img" id="img1"/></a>
     </div>
     <div class="nav_bar_div" id="visible_div2">
         <ul class="nav_bar" id="ul1">
             <li><a href="">Home</a></li>
             <li><a href="">Services</a></li>
             <li><a href="">Contact</a></li>
             <li><a href="">About</a></li>
         </ul>
     </div>
     <div class="main_div" id="visible_div3">
     </div>
 </body>
 <footer>
     Footer Text
 </footer>

body{
    background-color: #5d5953;
    font: arial;
    color: white;
}

.img_div{
    position: relative;
    margin: auto;
    height: 10%;
    overflow: hidden;
    background: white;
    width: 60%;
}

.logo_img{
    top: 10%;
    float: right;
    height: 80%;
    padding: 0 2% 0 2%;
    position: relative;
}

.nav_bar_div{
    width: 60%;
    background: #ff9900;
    margin: auto;
    padding: 0;
}

.nav_bar{
    list-style-type: none;
    margin: auto;
    overflow: hidden;
}

.nav_bar > li{
    display: inline-block;
    margin: 0;
    padding: 1%;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
}

.nav_bar > li:hover{
    background-color: white;
}

.nav_bar > li > a{
    display: block;
    text-decoration: none;
    font-family: arial;
    font-weight: bold;
    color: white;
    font-size: 2em;
    margin: 0;
}

.nav_bar > li:hover a{
    color: #ff9900;
}

.main_div{
    background-color: white;
    color: black;
    width: 60%;
    height: 85%;
    margin: auto;
    background-image: url("images/welcome_image.jpg");
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;

}

footer{
    background-color: #ff9900;
    font-family: arial;
    width: 60%;
    margin: auto;
    text-align: center;
    padding: 0.5% 0 0.5% 0;
}