原始代码：

<html>

<head>

    <meta charset="utf-8">

    <meta content="ie=edge" http-equiv="x-ua-compatible">

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

</head>

<style type="text/css">

    #content{

        width:7.2rem

    }

    .price-div{

      background-color:yellow;

    }

    .price-div span{

      background-color:green;

    }    

    .price-unit{

        font-size:0.25rem;

    }

    .price-number{

        font-size:0.31rem;

    }

</style>

<body>

<div id="content" style="float:left">

    <div class="price-div" >

        <span class="price-unit">￥</span>

        <span  class="price-number">42</span>

    </div>

</div>

<script type="text/javascript">

    //计算字体大小

    var calculateFontSize = function () {

        var BASE_FONT_SIZE = 100;

        var docEl = document.documentElement,

                clientWidth = docEl.clientWidth;

        if (!clientWidth) return;

        docEl.style.fontSize = BASE_FONT_SIZE * (clientWidth / 720) + 'px';

    };

    calculateFontSize();

    // Abort if browser does not support addEventListener

    if (document.addEventListener) {

        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

        window.addEventListener(resizeEvt, calculateFontSize, false);

        document.addEventListener('DOMContentLoaded', calculateFontSize, false);

    }

</script>

</body>

</html>

效果：

原因：

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

解决方法一：

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

<style type="text/css">

    #content{

        width:7.2rem

    }

    .price-div{

      background-color:yellow;

      height:0.4rem;

      line-height:0.4rem;

      position:relative;

    }

    .price-div span{

      background-color:green;

    }    

    .price-unit{

        font-size:0.25rem;

        position:absolute;

        top:0rem;

        left:0.2rem;

    }

    .price-number{

        font-size:0.31rem;

        position:absolute;

        top:0rem;

        left:0.5rem;

    }

</style>

效果：

解决方法二：

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

<style type="text/css">

    #content{

        width:7.2rem

    }

    .price-div{

      background-color:yellow;

      height:0.4rem;

      line-height:0.4rem;

    }

    .price-div span{

      background-color:green;

    }    

    .price-unit{

        font-size:0.25rem;

        vertical-align:top;

    }

    .price-number{

        font-size:0.31rem;

        vertical-align:top;

    }

</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. python 多线程示例

    原文链接:http://www.cnblogs.com/whatisfantasy/p/6440585.html 1 概念梳理: 1.1 线程 1.1.1 什么是线程 线程是操作系统能够进行运算调度的 ...

  2. JavaScript基础函数和词法分析以及常用的内置对象和使用方法（4）

    day52 参考:https://www.cnblogs.com/liwenzhou/p/8004649.html 函数 函数定义 JavaScript中的函数和Python中的非常类似,只是定义方式 ...

  3. 关于使用Iscroll.js异步加载数据后不能滑动到最底端的问题解决方案

    关于使用Iscroll.js异步加载数据后不能滑动到最底端,拉到最下边又弹回去的问题困扰了我老半天,相信很多朋友都遇到了.我刚好不小心解决了,和大家分享一下.由于各种忙,下边就直接上代码吧. (前提是 ...

  4. php文件每隔几秒执行一次

    说实话,linux 下面的crontab 任务完全可以实现所有的定时任务脚本,但是有些脚本只需要在一段时间内执行,过了这段时间之后,就不再执行定时脚本了.在使用crontab的时候,就需要人为的关闭掉 ...

  5. mysql_load_data及权限管理

    ———————————————————————————————————————— 添加权限: The only priv_type values you can specify for a table ...

  6. puppet更新失败

    # puppet-updatepuppet: no process foundWarning: Unable to fetch my node definition, but the agent ru ...

  7. iOS-AFNetworking参数和多文件同时上传【多文件上传】

    1. 前言 在项目开发中,我们经常需要上传文件,例如:上传图片,上传各种文件,而有时也需要将参数和多个文件一起上传,不知道大家的项目中遇到了没有,我在最近的项目中,就需要这样的一个功能:同时上传参数. ...

  8. 贪吃蛇小游戏-----C语言实现

    1.分析 众所周知,贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本,既简单又耐玩.该游戏通过控制蛇头方向吃食物,从而使得蛇变得越来越长,蛇不能撞墙,也不能装到自己,否则游戏结束.玩过贪吃蛇的 ...

  9. (转)MySQL备份原理详解

    MySQL备份原理详解 原文:http://www.cnblogs.com/cchust/p/5452557.html 备份是数据安全的最后一道防线,对于任何数据丢失的场景,备份虽然不一定能恢复百分之 ...

  10. Java—关于String的分析

    一.两种赋值方式的比较 1.直接赋值法:String s1="abc"; 这种赋值方法用的最多,因为它可能不需要创建对象,或者只创建一次. 它首先会判断字符串常量池有没有存在字符串 ...