iPhone 6/plus iOS Safari フィールドセットの境界線が消える_html/css_WEB-ITnose

問題: iPhone6 plus で Web を閲覧すると、フィールドセットの境界線が消えます。

サンプルコード:

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

上記のコードのおおよその効果は次のとおりです:

携帯電話を使用して閲覧およびテストしましたが、他の携帯電話では問題ありませんが、iPhone6 plus で閲覧する場合は問題ありません。 、「基準境界線が消える」「問題、その効果は次のとおりです:

これは少し不可解ですが、その後Googleでキーワード「iphone6 plus fieldset border」を検索したところ、誰かが実際に同じことに遭遇したことがわかりました私としての問題:

上記の3つの記事はすべてその人が書いたものですが、誰も答えませんでした。問題をテストして解決する方法。Chrome のモバイル シミュレーターのブラウジングが機能しませんでした。この問題は非常に奇妙なため、iPhone6 plus でのみテストできるか、問題がある可能性があります。 iOSの問題です。私は多くのスタイルの調整や変更を試しましたが、解決策がありませんでした。その後、iPhone6を使用して横方向に閲覧したところ、ようやく境界線が消えたことがわかりました。よくよく考えてみると、iPhone 6 で横画面でブラウジングすると枠線が消えて、縦画面では枠線が消えないのはなぜですか?彼らはどのように異なるブラウジングをするのでしょうか?答えは、 ページが拡大されます。 。 。

確認するために、iPhone 6 をポートレートモードですぐにページを閲覧し、ページを拡大すると、問題が確認されました。その後、Google でキーワード「iphone6 」を検索しました。 plus fieldset borderzoom」で見つけました。次の記事: iOS 8.3 fieldset border bug

質問した人は、これは iOS 8.3 のバグだと考えています。私もそう思います。別の質問があります。iPhone6 はなぜ縦画面ブラウジングには問題ありませんが、iPhone6 plus は縦画面ブラウジングに問題がありますか?また、ページを手動で拡大したわけではありません。その答えは、iPhone6 Plus の画面の一部のコンテンツについては、この記事で知ることができます: 携帯電話のブラウジングへの適応によって引き起こされる「ブレインストーミング」。 、簡単なまとめ つまり、iPhone6 plus の画面は「完全な比率」ではないため、ページのコンテンツを表示するときに再レンダリングしたり、ズームインしたりズームアウトしたりする必要があるため、iPhone6 plus で表示されるコンテンツは画面は少し「ぎこちない」状態になります。

枠線が消えた場合の解決策:

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

位置は単なる例であり、特定のページに応じて調整する必要があります。 調整後の効果:

枠線が追加されない理由をもう一度考えてください。 float:left スタイルが凡例に追加されると消えますか?まず、フロート スタイルとは位置を意味します。iPhone 6 でページを拡大すると、フィールドセットの境界線が再レンダリングされて表示されるのはなぜですか。位置を見つけることができないと思います。凡例の位置に基づいてフィールドセットの境界線がレンダリングされる可能性があります。具体的な問題とその理由は、システムをアップグレードした後に再び表示されるかどうかを確認します。 。

上記のスタイルで問題は解決しますが、スクリーンショットをよく見ると、上部のスクリーンショットには含まれていない「引用」フォントに枠線があることがわかります。この「小さなこと」を解決するのに時間がかかりましたが、私は長い間さまざまな位置を調整できませんでした。この記事を通じて、位置設定、凡例、境界半径、およびボックスシャドウからいくつかのインスピレーションを得ました。 「引用」フォントの境界線を削除したいのですが、「引用」フォントの背景色を本文の背景色と同じに設定します。 - 凡例のスタイルを変更します:

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

どのようにズームインして参照しても、効果は次のようになります: