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;}，然后问题解决。

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

转载于:https://www.cnblogs.com/flyfish919/p/7052978.html

html定义好的css样式不能被渲染相关推荐

css样式中关于li的横向排列
在css样式中关于li的横向排列的方法大致有两种: 第一种 :直接在<li>里面设置样式 <ul style="list-style:none;"> < ...
jQuery基础 - 改变CSS样式
本文转自:http://www.cnblogs.com/Capricornus/archive/2010/02/10/1667095.html,所有权利归原作者所有. jQuery提供css()的方法 ...
jQuery中添加/改变/移除改变CSS样式例子
在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧. CSS()方法改变CSS样式 css ...
jq创建元素并设置css样式,JQuery为元素添加样式的实现方法
由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...
CSS样式属性（一）
字体样式 font-size:字号大小 font-size属性设置字号该属性的值可以使用相对长度单位也可以使用绝对长度单位其中相对长度单位比较常用推荐使用px像素单位相对长度单位说明 e ...
html中css的逗号用法,css样式多个类、标签用【逗号空格冒号点】分开的解析...
ReactNative学习之css样式使用前言: 前面学习了html,今天学习一下css的基本使用,看下html与css之间是如何结合来编写前端网页的. CSS 是什么? CSS 是 Cascadi ...
jq动态修改css样式表,jquery 动态改变css样式
jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的.作为一个后端开发人员,要做一些前端页面时,CSS 样式的控制是少不了需要掌握的.如果是静态的CSS,当然是可以直接 ...
Nuxt3遇见的坑（四）：图片动态渲染之后打包路径问题以及打包css样式问题
Nuxt3遇见的坑(四):图片动态渲染之后打包路径问题以及打包css样式问题图片问题我官网有个组件是非常多的图片,大概有40多张吧,那我肯定不能一张一张去写一个img,所以我用了v-for去循环渲 ...
jquery怎么动态修改css样式
jquery动态修改css样式的方法:1.通过css方法动态修改css样式:2.给指定的html元素定一个CSS样式:3.查看元素的css样式:4.隐藏与显示p或指定的其他html元素. jquery ...

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

html定义好的css样式不能被渲染相关推荐

最新文章

热门文章