iPhone 6/plus iOS Safari fieldset border border disappears_html/css_WEB-ITnose

Problem: When browsing the web on iPhone6 ​​plus, the fieldset border disappears.

Sample code:

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

The approximate effect of the above code is:

This is no problem, use mobile phone to browse and test, others There is no problem with the mobile phone, but the problem of "Quotation border disappears" occurs when browsing on iPhone6 ​​plus. The effect is:

It's a bit inexplicable, and then Google searches for "iphone6 ​​plus fieldset border" keyword, and found that someone actually encountered the same problem as me:

The three articles above were all written by that guy, but no one answered. There was no way. Then I used various methods to test and solve the problem, Chrome’s mobile phone simulation There is no problem with browser browsing, but this is very strange, so I can only test it with a real device. It may be a problem with iPhone6 ​​plus, or it may be a problem with iOS. I have tried many style adjustments and modifications, but still no solution. Later, I accidentally used Browsing iPhone 6 in landscape mode, I found that the border actually disappeared. Good guy, I finally found some clues. Think about it carefully, why does the border disappear when browsing iPhone 6 in landscape mode, but not in portrait mode? How do they browse differently? The answer is: The page is enlarged. . .

To confirm, I immediately browsed the page vertically on my iPhone 6, and then enlarged the page. As expected, the border also disappeared. This confirmed the problem, and then Google searched for "iphone6 ​​plus fieldset border zoom” keyword, I found the following article: iOS 8.3 fieldset border bug

The guy who asked the question thinks this is a bug in iOS 8.3, I think so, and there is another question, why iPhone6 There is no problem browsing in vertical screen, but there is a problem in vertical screen browsing on iPhone6 ​​plus? They also did not manually enlarge the page. The answer is that their screen parameters are different. Regarding some content of the iPhone6 ​​plus screen, you can learn about it through this article: A "brainstorm" triggered by mobile phone adaptation for browsing, a simple summary That is, because the screen of the iPhone6 ​​plus is not "perfectly proportioned", it needs to be re-rendered and zoomed in and out when presenting page content, so the content presented on the iPhone6 ​​plus screen will be a bit "awkward".

Solution to disappearing borders:

fieldset {    padding-top:10px;}legend {    float:left;/*重点*/    margin-top:-20px;}

Positioning is just an example and needs to be adjusted according to the specific page. The effect after adjustment:

Think about it again, why does the border not disappear when you add the float:left style to legend? First of all, the float style means positioning. When iPhone 6 enlarges the page, the positioning will change. The borders of the fieldset need to be re-rendered and displayed. Why does the border disappear? I think it cannot find the position. The borders of the fieldset may be rendered according to the position of the legend. I think the specific problem and reason is still a bug in iOS. I will see if it will appear again after upgrading the system. .

It should be noted that although the above style solves the problem, if you look carefully at the screenshot, you will find that there is a border in the "Quote" font, which is not in the top screenshot. Solving this "small It took me a lot of time to adjust various positioning but it didn't work. Finally, through this article: Fieldset, legend, border-radius and box-shadow, I got some inspiration. Since I can't adjust the positioning, I want to eliminate the "quote" font. In the border, then I set the background color of the "Quote" font to be the same as the background color of the Body. Isn't that enough? Re-modify the legend style:

legend {    float:left;    margin-top:-20px;    background: #FAFAFA;/*添加和 body 一样的背景色*/}

No matter how you zoom in and browse, the effect is the same. It goes like this: