使用rem编写自适应屏幕网页造成div被span撑高的解决办法
原始代码：
<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撑高的解决办法的更多相关文章
- 17.在自适应屏幕里通过JQ来获取宽高并赋给需要的
在自适应屏幕里通过JQ来获取宽高并赋给需要的div. var height = document.documentElement.clientHeight; $(window).height();(同 ...
- 嵌套div中margin-top转移问题的解决办法
在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div. <!DOCT ...
- 所有浏览器打开后自动打开115.29.163.152/404.html这个网页，然后自动跳转到hao123 解决办法
这几天,电脑所有浏览器打开后自动打开115.29.163.152/404.html这个网页,然后自动跳转到hao123这个网页,网上查询没解决办法.开始自己找,搜索注册表,都无效,最后下载软件Hija ...
- IOS 中微信 网页授权报 key[也就是code]失效 解决办法
枪魂微信平台ios手机点击返回 网页授权失败,报key失效.已经解决,原因是授权key只能使用一次,再次使用就会失效. 解决办法:第一次从菜单中进行授权时,用session记录key和open_id. ...
- 通过rem编写自适应移动端要点
直接上干货 1,dpr 苹果手机像素是2 普通安卓机是1 也就是说1像素下苹果需要的像素点是安卓机的两倍 所以一个需要15x15显示的图像安卓机仅需要提供15X15即可显示清楚 苹果手机需要要30X3 ...
- DIV的不能包住子集解决办法
在div的样式中加上:overflow:hidden,或者float:left或right
- （转）在编写Spring框架的配置文件时，标签无提示符的解决办法
http://blog.csdn.net/yerenyuan_pku/article/details/52831618 问题描述 初学者在学习Spring框架的过程中,大概会碰到这样一个问题:在编写S ...
- IE提示“Internet Explorer已限制此网页运行脚本或ActiveX控件”的解决办法
在页面html开始标签和head开始标签中间新增一行,添加以下代码: <!-- saved from url=(0014)about:internet --> 或者 直接设置IE浏览器 工 ...
- asp.net网页防刷新重复提交、防后退解决办法！
原文发布时间为:2008-10-14 -- 来源于本人的百度文章 [由搬家工具导入] 1、提交后 禁用提交按钮（像CSDN这样）2、数据处理成功马上跳转到另外一个页面！ 操作后刷新的确是个问题，你可以 ...
随机推荐
- Cordova - 彻底搞定安卓中的微信支付插件！
Cordova:8.0.0 Android studio:3.2.1 cordova-plugin-adam-wechat : 3.0.6 你看到这个标题肯定会惊讶,一个Cordova的微信支付插件, ...
- 【ocp新题】OCP 12c 062认证考试出现大量新题-8
8. Which are two ways for a database service to be recognized by a listener in Oracle Database 12c? ...
- “全栈2019”Java多线程第二十章：同步方法产生死锁的例子
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- 合服导致 globalserver 起不来的问题
globalserver 报错 RMIInitArmyBackObject InitError 根据报错信息一路追查下来,发现某个帮派的数据解析 json 的时候报错.监视变量,找出这段字符串,大致结 ...
- 五，session数据写入memcached
1,session数据通常保存在服务器端的文件中,它的默认过期时间是1440s.我们可以将session数据保存到memcached中,设定memcached的过期时间大于session过期时间即可. ...
- 【wireshark】插件开发（一）：概述
1. 概述 wireshark提供了灵活的插件机制,使用户可以方便地扩展wireshark的功能.插件的功能主要包括,但不限于协议解析器. 可以使用Lua或C语言来编写Wireshark插件,下表对比 ...
- servlet转发与重定向区别
servlet转发与重定向 HttpServletRequest: 表示浏览器向服务器发送的请求报文,由Tomcat创建然后作为参数传递给我们doget,dopost方法. 功能:getParam ...
- day 55 linux 的常用命令
前言 前面咱们已经成功安装了Linux系统--centos7,那么我们现在提好裤腰带,准备奔向Linux的大门. Linux命令行的组成结构 [root@oldboy_python ~]# [roo ...
- AngularJS入门之数据绑定
本篇我们看一下AngularJS中的数据绑定.虽然我们直到这篇才提到数据绑定,但事实上在前面几篇中我们已经非常熟练的运用AngularJS的数据绑定功能了! ngBind(ng-bind)/ {{ e ...
- 大数据技术之_19_Spark学习_04_Spark Streaming 应用解析小结
========== Spark Streaming 是什么 ==========1.SPark Streaming 是 Spark 中一个组件,基于 Spark Core 进行构建,用于对流式进行处 ...