首页 > 代码库 > html定义好的css样式不能被渲染

html定义好的css样式不能被渲染

预期效果

技术分享

实际效果,在浏览器中打开该html文件时,浏览器只显示左箭头,不显示右箭头

技术分享

html代码如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <style type="text/css">
   *{margin:0;padding:0;}
   #container
   {
    width:600px;
    height: 400px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background-color:#00b;
   }
   
   #container #leftBtn
   {
    position: absolute;
    width:45px;
    height: 45px;
    top:108px;
    left: 20px;
    background: url(‘images/icon/icon.png‘) no-repeat 0 0;
    cursor: pointer;
   } 
   #container #rightBtn
   {
    position: absolute;
    width:45px;
    height: 45px;
    top:108px;
    right: 20px;
    background: url(images/icon/icon.png) no-repeat 0 -45px;
    cursor: pointer;
   }
  </style>
 </head>
 <body>
  <div id="container">
   <div id="btn">
    <div id="leftBtn"></div>
    <div id="rightBtn"></div>
   </div>
  </div>
 </body>
</html>

css中调用的icon.png图片如下:

技术分享

解决办法:

后来在左箭头和右箭头样式的中间加了一行*{margin:0;padding:0;},然后问题解决。

技术分享

虽然问题解决,但是依然不知道是什么原因导致。记录在此,若有同学知道,还希望不吝赐教。

 

 

 

 

html定义好的css样式不能被渲染