iPhone 6/plus iOS Safari fieldset border 边框消失
问题:iPhone6 plus 手机浏览网页,fieldset border 边框消失。
示例代码:
<div>
<fieldset style="border: 1px solid #DDD;">
<legend>引用</legend>
这里是引用内容。。。
</fieldset>
这里是评论内容。。。
<div>
上面代码的大致效果为:
这是没有什么问题的,用手机浏览测试,其他手机都没问题,但 iPhone6 plus 浏览却出现了“引用边框消失”的问题,效果为:
有点莫名奇妙,然后 Google 搜索“iphone6 plus fieldset border”关键字,发现有人居然和我同样遇到这个问题:
- https://discussions.apple.com/thread/6889572?start=0&tstart=0
- http://stackoverflow.com/questions/29218615/fieldset-border-is-missing-in-iphone6-plus
- http://w3schools.invisionzone.com/index.php?showtopic=52824
上面的三篇文章都是那哥们写的,但也没有人回答,没办法,后来我就用各种方法测试解决,Chrome 的手机模拟器浏览是没有问题,这个就很奇怪,所以只能用真机测试,有可能是 iPhone6 plus 的问题,也有可能是 iOS 的问题,试过很多样式调整修改,但还是没有解决,后来无意间用 iPhone6 横屏浏览,发现边框居然也消失了,好家伙,终于找到了一点线索,仔细想想,为什么 iPhone6 横屏浏览边框会消失,而竖屏不会消失呢?他们浏览有什么不同呢?答案就是:页面被放大了啊。。。
为了证实,马上用 iPhone6 竖屏浏览,然后放大页面,和预料的一样,边框也消失了,确定了这个问题,然后 Google 又搜索“iphone6 plus fieldset border zoom”关键字,找到了下面这篇文章:iOS 8.3 fieldset border bug
提问的那哥们认为这是 iOS 8.3 的一个 bug,我觉得也是,还有一个问题,为什么 iPhone6 竖屏浏览没问题,而 iPhone6 plus 竖屏浏览却有问题呢?他们同样都没有手动放大页面,答案是它们的屏幕参数不一样,关于 iPhone6 plus 屏幕的一些内容,可以通过这篇文章进行了解:手机适配浏览,所引发的一场“头脑风暴”,简单概括就是,iPhone6 plus 的屏幕因为不是“完美比例”,在呈现页面内容的时候,需要重新进行渲染放大缩小,所以 iPhone6 plus 屏幕呈现出来的内容会有些“别扭”。
边框消失的解决方式:
fieldset {
padding-top:10px;
}
legend {
float:left;/*重点*/
margin-top:-20px;
}
定位只是示例,需要根据具体页面再进行调整,调整之后的效果:
再想一下,为什么在 legend 中增加 float:left
样式,边框就不会消失呢?首先,float 样式有定位的意思,iPhone6 在放大页面的时候,定位就会发生一些变化,fieldset 的边框需要重新进行渲染展示,为什么边框消失?我觉得应该是它找不到定位了,fieldset 的边框有可能是根据 legend 的位置进行渲染的,具体的问题和原因,我觉得还是 iOS 的一个 bug,看看后面升级系统后还会不会出现。
需要注意的是,上面的样式虽然解决了问题,但仔细看下截图,就会发现,在“引用”字体中有边框,最上面的截图中并没有,解决这个“小东西”花了我很多时间,调整各种定位都是不行,最后通过这篇文章:Fieldset, legend, border-radius and box-shadow,得到一些启示,既然无法调整定位,想要消灭“引用”字体中的边框,那我把“引用”字体的背景颜色和 Body 背景颜色设置成一样,不就行了吗,legend 的样式重新修改下:
legend {
float:left;
margin-top:-20px;
background: #FAFAFA;/*添加和 body 一样的背景色*/
}
不论怎么放大浏览,效果都是这样的:
iPhone 6/plus iOS Safari fieldset border 边框消失的更多相关文章
- 解决ios safari中按钮圆角问题【原创】
问题描述 使用html5编写页面在移动app中嵌套,总会涉及到按钮的使用,在android手机浏览器中显示正常,但在ios safari浏览器中会看到按钮显示为圆角样式,设置border-rad ...
- [转]iOS Safari 中click点击事件失效的解决办法
iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...
- 大屏iPhone的适配 +iOS 图片尺寸要求
摘自:http://blog.ibireme.com/2014/09/16/adapted_to_iphone6/ 苹果公司官网设计介绍到:Retina显示屏的超高像素密度已超过人眼能分辨的范围.Re ...
- css 使用background背景实现border边框效果
css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...
- 解决IOS safari在input focus弹出输入法时不支持position fixed的问题
该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...
- 【代码笔记】Web-CSS-CSS Border(边框)
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法
盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...
- IOS UIView圆角,阴影,边框,渐增光泽
圆角 sampleView.layer.cornerRadius = 2.5; // 圓角的弧度sampleView.layer.masksToBounds = YES; 阴影 sampleView. ...
- CSS border边框属性教程(color style)
CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...
随机推荐
- Web Components初探
本文来自 mweb.baidu.com 做最好的无线WEB研发团队 是随着 Web 应用不断丰富,过度分离的设计也会带来可重用性上的问题.于是各家显神通,各种 UI 组件工具库层出不穷,煞有八仙过海之 ...
- Java 集合类的特性
ArrayList: 元素单个,效率高,多用于查询 Vector: 元素单个,线程安全,多用于查询 LinkedList: 元素单个,多用于插入和删除 HashMap: 元素成对,元素可为空 H ...
- xml中DTD解析
DTD的作用是"文档类型的定义" DTD申明始终以<!DOCTYPE开头(开头后空一格). 本标签一共有三种写法 一.内部DTD: <!DOCTYPE 根元素 [ 文档 ...
- 安卓中的Model-View-Presenter模式介绍
转载自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0425/2782.html 英文原文:Introduction to M ...
- Visual Studio 2015 如何将全英界面转成中文
1 启动VS2015程序,在菜单栏中找到tools 2 在弹出的下拉窗口中选中options 3 此时弹出的对话框,选中Environment下的international setting 4 点击获 ...
- 使用VS2013进行单元测试
这次的作业安装了VS2013,对于它的安装过程我就不再细说了,归结起来就是一个字——等,尤其是语言包,最后只好放弃了装语言包,凭借我3级半的英语水平,明白这些没有问题——这仅仅个玩笑话,其实我是用有道 ...
- Entity Framework扩展库
这个Entity Framework扩展完全支持EF 5.0/6.0,项目地址 https://github.com/loresoft/EntityFramework.Extended,这个库支持批量 ...
- clojure基础入门(一)
最近在看storm的源码,就学习分享下clojure语法. 阅读目录: 概述 变量 运算符 流程控制 总结 概述 clojure是一种运行在JVM上的Lisp方言,属于函数式编程范式,它和java可以 ...
- Tomcat搭建
标签:Tomcat 概述 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选. ...
- String驻留带来的危害
原创文章转载请注明出处:@协思, http://zeeman.cnblogs.com 前段时间接手了一个项目优化工作,在同等场景下内存使用从4G降低到200M. 项目是将实体序列化成字符串存入 ...