码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-06-20 11:03:08      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:alt   右箭头   bsp   head   logs   height   idt   int   浏览器   

预期效果

技术分享

实际效果,在浏览器中打开该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样式不能被渲染

标签:alt   右箭头   bsp   head   logs   height   idt   int   浏览器   

原文地址:http://www.cnblogs.com/flyfish919/p/7052978.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!