原始代码：

  1. <html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <meta content="ie=edge" http-equiv="x-ua-compatible">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  6. </head>
  7. <style type="text/css">
  8.     #content{
  9.         width:7.2rem
  10.     }
  11.  
  12.     .price-div{
  13.       background-color:yellow;
  14.     }
  15.  
  16.     .price-div span{
  17.       background-color:green;
  18.     }    
  19.  
  20.     .price-unit{
  21.         font-size:0.25rem;
  22.     }
  23.  
  24.     .price-number{
  25.         font-size:0.31rem;
  26.     }
  27. </style>
  28. <body>
  29. <div id="content" style="float:left">
  30.     <div class="price-div" >
  31.         <span class="price-unit">￥</span>
  32.         <span  class="price-number">42</span>
  33.     </div>
  34. </div>
  35.  
  36. <script type="text/javascript">
  37.     //计算字体大小
  38.     var calculateFontSize = function () {
  39.         var BASE_FONT_SIZE = 100;
  40.  
  41.         var docEl = document.documentElement,
  42.                 clientWidth = docEl.clientWidth;
  43.         if (!clientWidth) return;
  44.         docEl.style.fontSize = BASE_FONT_SIZE * (clientWidth / 720) + 'px';
  45.  
  46.     };
  47.     calculateFontSize();
  48.  
  49.     // Abort if browser does not support addEventListener
  50.     if (document.addEventListener) {
  51.         var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  52.         window.addEventListener(resizeEvt, calculateFontSize, false);
  53.         document.addEventListener('DOMContentLoaded', calculateFontSize, false);
  54.     }
  55.  
  56. </script>
  57. </body>
  58. </html>

效果：

原因：

rem缩放，导致，去掉缩放的js代码就好了。但这个不是解决办法。

解决方法一：

div设置高度并采用相对定位,span采用绝对定位。

  1. <style type="text/css">
  2.     #content{
  3.         width:7.2rem
  4.     }
  5.  
  6.     .price-div{
  7.       background-color:yellow;
  8.       height:0.4rem;
  9.       line-height:0.4rem;
  10.       position:relative;
  11.     }
  12.  
  13.     .price-div span{
  14.       background-color:green;
  15.     }    
  16.  
  17.     .price-unit{
  18.         font-size:0.25rem;
  19.         position:absolute;
  20.         top:0rem;
  21.         left:0.2rem;
  22.     }
  23.  
  24.     .price-number{
  25.         font-size:0.31rem;
  26.         position:absolute;
  27.         top:0rem;
  28.         left:0.5rem;
  29.     }
  30. </style>

效果：

解决方法二：

div设置高度，span等内联元素设置vertical-align为top。

  1. <style type="text/css">
  2.     #content{
  3.         width:7.2rem
  4.     }
  5.  
  6.     .price-div{
  7.       background-color:yellow;
  8.       height:0.4rem;
  9.       line-height:0.4rem;
  10.     }
  11.  
  12.     .price-div span{
  13.       background-color:green;
  14.     }    
  15.  
  16.     .price-unit{
  17.         font-size:0.25rem;
  18.         vertical-align:top;
  19.     }
  20.  
  21.     .price-number{
  22.         font-size:0.31rem;
  23.         vertical-align:top;
  24.     }
  25. </style>

效果：

使用rem编写自适应屏幕网页造成div被span撑高的解决办法的更多相关文章

  1. 17.在自适应屏幕里通过JQ来获取宽高并赋给需要的

    在自适应屏幕里通过JQ来获取宽高并赋给需要的div. var height = document.documentElement.clientHeight; $(window).height();(同 ...

  2. 嵌套div中margin-top转移问题的解决办法

    在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div. <!DOCT ...

  3. 所有浏览器打开后自动打开115.29.163.152/404.html这个网页，然后自动跳转到hao123 解决办法

    这几天,电脑所有浏览器打开后自动打开115.29.163.152/404.html这个网页,然后自动跳转到hao123这个网页,网上查询没解决办法.开始自己找,搜索注册表,都无效,最后下载软件Hija ...

  4. IOS 中微信 网页授权报 key[也就是code]失效 解决办法

    枪魂微信平台ios手机点击返回 网页授权失败,报key失效.已经解决,原因是授权key只能使用一次,再次使用就会失效. 解决办法:第一次从菜单中进行授权时,用session记录key和open_id. ...

  5. 通过rem编写自适应移动端要点

    直接上干货 1,dpr 苹果手机像素是2 普通安卓机是1 也就是说1像素下苹果需要的像素点是安卓机的两倍 所以一个需要15x15显示的图像安卓机仅需要提供15X15即可显示清楚 苹果手机需要要30X3 ...

  6. DIV的不能包住子集解决办法

    在div的样式中加上:overflow:hidden,或者float:left或right

  7. （转）在编写Spring框架的配置文件时，标签无提示符的解决办法

    http://blog.csdn.net/yerenyuan_pku/article/details/52831618 问题描述 初学者在学习Spring框架的过程中,大概会碰到这样一个问题:在编写S ...

  8. IE提示“Internet Explorer已限制此网页运行脚本或ActiveX控件”的解决办法

    在页面html开始标签和head开始标签中间新增一行,添加以下代码: <!-- saved from url=(0014)about:internet --> 或者 直接设置IE浏览器 工 ...

  9. asp.net网页防刷新重复提交、防后退解决办法！

    原文发布时间为:2008-10-14 -- 来源于本人的百度文章 [由搬家工具导入] 1、提交后 禁用提交按钮（像CSDN这样）2、数据处理成功马上跳转到另外一个页面！ 操作后刷新的确是个问题，你可以 ...

随机推荐

  1. SqlAlchemy操作（三）

    1.基于SQLALCHEMY建表 from sqlalchemy.ext.declarative import declarative_base from sqlalchemy import Colu ...

  2. python web开发c6——阿里云上ubuntu+flask+gunicorn+nginx服务器部署(一)简单测试

    简述 Nginx在服务器部署中的作用 请求通过Nginx实现反向代理,将请求提交给代理服务器.本文中只用了一台服务器,所以是代理到本机. gunicorn的作用 作为服务器代码的容器.接收Nginx的 ...

  3. Flask从入门到精通之大型程序的结构二

    一.程序包 程序包用来保存程序的所有代码.模板和静态文件.我们可以把这个包直接称为app(应用),如果有需求,也可使用一个程序专用名字.templates 和static 文件夹是程序包的一部分,因此 ...

  4. [Swift实际操作]七、常见概念-(1).范围Range、ClosedRange和NSRange的使用实际操作

    本文将为你解析区间的概念.在对字符串进行处理时,经常会使用到区间.例如获得字符串中从某个位置开始到另一个位置之间的内容. 首先导入需要使用到的框架 import Foundation 区间分为闭区间和 ...

  5. jmeter插件之自定义场景图(万能场景设计)

    添加扩展插件 自定义线程组:jp@gc - Ultimate Thread Group 此线程组功能强大,可以实现多种场景设置,添加路径如图 参数含义解释 Start Threads Count:当前 ...

  6. selenium+java iframe定位

      关于 driver.switchTo().frame(参数).这中间的参数表达有以下几种方式. driver.switchTo().frame(0):用<iframe>标签的位置数量来 ...

  7. easyui tree扩展tree方法获取目标节点的一级子节点

    Easyui tree扩展tree方法获取目标节点的一级子节点 /* 只返回目标节点的第一级子节点,具体的用法和getChildren方法是一样的 */ $.extend($.fn.tree.meth ...

  8. Java之集合(十五)Set综述

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7427554.html 1.前言 原本按照顺序应该是list.queue然后就是set的讲解,但是因为set的实现 ...

  9. Fiddler4抓包工具使用教程一

    本文参考自http://blog.csdn.net/ohmygirl/article/details/17846199,纯属读书笔记,加深记忆 1.抓包工具有很多,为什么要使用Fiddler呢?原因如 ...

  10. C#设计模式系列目录

    http://www.cnblogs.com/libingql/archive/2012/04/16/2451608.html 抽空,学习,加强!