文档章节

微信浏览器和PC对于某些元素的解析不同

Reya滴水心
 Reya滴水心
发布于 2016/01/26 18:20
字数 773
阅读 387
收藏 7

web移动版本开发,必须要用到自适应。实现自适应的无非两种办法:一种flex弹性盒子模型;一种百分比,使用百分比,必然会用到box-sizing: border-box。

补充一个知识点:CSS的盒子模型有两种,一种是标准W3C盒子模型,一种是IE盒子模型。

简言之,两者的区别就是:IE盒子模型的宽度包含padding和border的值,标准盒子模型不包含。

看图说话:(PS图片是盗用的 http://www.jb51.net/css/12199.html)

然后来说说开发中碰到的两个问题:

    如下图弹出框所示:左图是在PC的效果,右图是ios微信的效果。从图中可以看出,PC中容器的高度=容器内容的高度;ios微信中容器的高度<容器内容的高度,(ios微信中容器的高度=ios微信中容器内容的高度-1)。补充:android微信中容器的高度=android微信中容器内容的高度-2。

  

1、微信和PC对行内元素解析方式不同。

    分析:上图弹出框中有个span标签,HTML:<span>详细地址</span> CSS:span{line-height:45px;} PC对于span标签的解析是45px,微信对于span标签的解析是46px。

    解决办法:将span标签设置为块级元素。span{display:block;}  ---> 设置后,发现ios微信中容器的高度=ios微信中容器内容的高度,但是android微信中容器的高度=android微信中容器内容的高度-1,这个会在第二个问题中讨论。

    类推:微信和PC只是对于span标签的解析不同,还是对于所有的行内元素解析方式都不相同?

    -------------------------------------------------------------------------------------

    结论:通过测试span、a、img,发现PC和微信对行内元素的解析方式,行内元素在微信中会多出1px的间隙,将行内元素设置为块级元素(display:block;)则在微信和PC解析结果相同。


2、ios微信、PC和android微信对于select的解析方式不同。

    当第一个问题解决之后,发现PC和ios微信相同,但是android微信中容器的高度=android微信中容器内容的高度-1。

    分析:上图中对于地区选择使用了select标签,高度设置为45px,PC和ios微信对select的解析都为45px,但是android微信解析为46px。

    解决办法:将select设置为块级元素。select{display:block;} --->设置后,发现问题解决。

    补充:因为上图弹出框中有两个select,所以使用了display:flex; flex:1; 但是该属性对于PC和ios微信都生效,对android微信却不生效。因为上图中弹出框的宽度是固定的,所以可以通过给select设置width解决。select{width:74px;} --->如果弹出框的宽度不固定怎么设置,这个后续再讨论。






© 著作权归作者所有

Reya滴水心
粉丝 40
博文 88
码字总数 34619
作品 0
深圳
前端工程师
私信 提问
前端开发常见问题精选(二)

一、如何解决Canvas画布在移动端显示模糊的问题? Canvas画布在PC端显示正常,但是放在移动端却发现整个画布都有点模糊,其实这里有个比较简单的解决方法: 先给canvas标签的width和height这...

璿而不华
2017/09/24
0
0
移动端布局与适配

grid实战之微信钱包 腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格,实际上是你将一个元素声明为一个网格容器,并把元素内容置于网...

掘金官方
2017/12/26
0
0
反击爬虫,前端工程师的脑洞可以有多大?

出处:Litten 1. 前言 对于一张网页,我们往往希望它是结构良好,内容清晰的,这样搜索引擎才能准确地认知它。 而反过来,又有一些情景,我们不希望内容能被轻易获取,比方说电商网站的交易额...

新生大学
2017/10/24
0
0
反击爬虫,前端工程师的脑洞可以有多大?

前言 对于一张网页,我们往往希望它是结构良好,内容清晰的,这样搜索引擎才能准确地认知它。 而反过来,又有一些情景,我们不希望内容能被轻易获取,比方说电商网站的交易额,教育网站的题目...

大数据之路
2012/07/17
506
0
粉丝群DOM小测第27期直播答疑文字版

原文地址:www.zhangxinxu.com/wordpress/?… 一、题目与考察点 题目如下(纸质打印拍摄图): 是相当简单的一道题目,入门级别的,虽然挺简单,但还有很多细节是很多人不知道的,因此还是很...

张鑫旭
01/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java FOR-EACH循环

FOR-EACH循环使得代码更加的简短,也让代码更加易懂,其实他并没有加入什么新的功能。他的功能完全可以用简单的FOR循环代替。 for-each的用法: int a[] = {1,2,3,4,5,6} for(int s:a){ Syst...

无名氏的程序员
33分钟前
3
0
使用HTML5的History API

本文转载于:专业的前端网站➣使用HTML5的History API   HTML5 History API提供了一种功能,能让开发人员在不刷新整个页面的情况下修改站点的URL。这个功能很有用,例如通过一段JavaScript代...

前端老手
35分钟前
4
0
JAVA 编写redisUtils工具类,防止高并发获取缓存出现并发问题

import lombok.extern.slf4j.Slf4j;import org.springframework.data.redis.core.BoundHashOperations;import org.springframework.data.redis.core.BoundValueOperations;import org.......

huangkejie
今天
7
0
JMM内存模型(一)&volatile关键字的可见性

在说这个之前,我想先说一下计算机的内存模型: CPU在执行的时候,肯定要有数据,而数据在内存中放着呢,这里的内存就是计算机的物理内存,刚开始还好,但是随着技术的发展,CPU处理的速度越...

走向人生巅峰的大路
今天
101
0
你对AJAX认知有多少(2)?

接着昨日内容,我们几天继续探讨ajax的相关知识点 提到ajax下面几个问题又是必须要了解的啦~~~ 8、在浏览器端如何得到服务器端响应的XML数据。 通过XMLHttpRequest对象的responseXMl属性 9、 ...

理性思考
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部