问题:iPhone6 plus 手机浏览网页,fieldset border 边框消失。

示例代码:

<div>
<fieldset style="border: 1px solid #DDD;">
<legend>引用</legend>
这里是引用内容。。。
</fieldset>
这里是评论内容。。。
<div>

上面代码的大致效果为:

这是没有什么问题的,用手机浏览测试,其他手机都没问题,但 iPhone6 plus 浏览却出现了“引用边框消失”的问题,效果为:

有点莫名奇妙,然后 Google 搜索“iphone6 plus fieldset border”关键字,发现有人居然和我同样遇到这个问题:

上面的三篇文章都是那哥们写的,但也没有人回答,没办法,后来我就用各种方法测试解决,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 边框消失的更多相关文章

  1. 解决ios safari中按钮圆角问题【原创】

       问题描述 使用html5编写页面在移动app中嵌套,总会涉及到按钮的使用,在android手机浏览器中显示正常,但在ios safari浏览器中会看到按钮显示为圆角样式,设置border-rad ...

  2. [转]iOS Safari 中click点击事件失效的解决办法

    iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...

  3. 大屏iPhone的适配 +iOS 图片尺寸要求

    摘自:http://blog.ibireme.com/2014/09/16/adapted_to_iphone6/ 苹果公司官网设计介绍到:Retina显示屏的超高像素密度已超过人眼能分辨的范围.Re ...

  4. css 使用background背景实现border边框效果

    css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...

  5. 解决IOS safari在input focus弹出输入法时不支持position fixed的问题

    该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...

  6. 【代码笔记】Web-CSS-CSS Border(边框)

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  7. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

  8. IOS UIView圆角,阴影,边框,渐增光泽

    圆角 sampleView.layer.cornerRadius = 2.5; // 圓角的弧度sampleView.layer.masksToBounds = YES; 阴影 sampleView. ...

  9. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

随机推荐

  1. Web Components初探

    本文来自 mweb.baidu.com 做最好的无线WEB研发团队 是随着 Web 应用不断丰富,过度分离的设计也会带来可重用性上的问题.于是各家显神通,各种 UI 组件工具库层出不穷,煞有八仙过海之 ...

  2. Java 集合类的特性

    ArrayList: 元素单个,效率高,多用于查询  Vector: 元素单个,线程安全,多用于查询 LinkedList: 元素单个,多用于插入和删除  HashMap: 元素成对,元素可为空  H ...

  3. xml中DTD解析

    DTD的作用是"文档类型的定义" DTD申明始终以<!DOCTYPE开头(开头后空一格). 本标签一共有三种写法 一.内部DTD: <!DOCTYPE 根元素 [ 文档 ...

  4. 安卓中的Model-View-Presenter模式介绍

    转载自:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0425/2782.html 英文原文:Introduction to M ...

  5. Visual Studio 2015 如何将全英界面转成中文

    1 启动VS2015程序,在菜单栏中找到tools 2 在弹出的下拉窗口中选中options 3 此时弹出的对话框,选中Environment下的international setting 4 点击获 ...

  6. 使用VS2013进行单元测试

    这次的作业安装了VS2013,对于它的安装过程我就不再细说了,归结起来就是一个字——等,尤其是语言包,最后只好放弃了装语言包,凭借我3级半的英语水平,明白这些没有问题——这仅仅个玩笑话,其实我是用有道 ...

  7. Entity Framework扩展库

    这个Entity Framework扩展完全支持EF 5.0/6.0,项目地址 https://github.com/loresoft/EntityFramework.Extended,这个库支持批量 ...

  8. clojure基础入门(一)

    最近在看storm的源码,就学习分享下clojure语法. 阅读目录: 概述 变量 运算符 流程控制 总结 概述 clojure是一种运行在JVM上的Lisp方言,属于函数式编程范式,它和java可以 ...

  9. Tomcat搭建

    标签:Tomcat 概述 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选. ...

  10. String驻留带来的危害

    原创文章转载请注明出处:@协思, http://zeeman.cnblogs.com   前段时间接手了一个项目优化工作,在同等场景下内存使用从4G降低到200M.   项目是将实体序列化成字符串存入 ...