在横向模式下，字段集无法正确显示在 ipad 上

Posted 2023-03-12

【中文标题】在横向模式下，字段集无法正确显示在 ipad 上

【英文标题】：fieldset not appears properly on ipad in landscape mode

【发布时间】：2013-10-03 23:23:52

【问题描述】：

我有一个 asp.net 网页。它有一个字段集。我在 iPad 上的 safari 中访问此页面。在纵向模式下是正确的。如中，我可以看到页面的字段集和功能也是正确的。我将 ipad 倾斜到横向，然后字段集消失了。

Snapshot of how the page looks in POTRAIT MODE

在横向模式下，我注意到字段集存在但很轻。这是横向模式的链接。

Snapshot after moving it into LANDSCAPE mode。

如果您仔细查看横向，“过滤器”和“客户信息面板”上有一条微弱的线。如何更正它以使页面在两种模式下都设置字段？

我有字段集的代码是：

  <table style="background-color:#EFEFEF;  border-collapse: collapse; border-spacing: 0;width:100%">
    <tr>
        <td style="vertical-align:top; width:510px;">
            <fieldset style="border:solid;border-color:brown;" onclick="">
                <legend style="text-align: center">FILTERS</legend>

                <table cellspacing="5" style="text-align: left; table-layout:fixed;" >
                   <tr>
                      .....

编辑：这也发生在 iPad 上的 Chrome 浏览器上。

如果您需要更多信息，请告诉我。谢谢

【问题讨论】：

好吧，我本身不需要更多信息，但我遇到了同样的问题。在我的 iPad 上，完美风格的字段集仅在 Safari 中以纵向模式显示，而不是横向模式。这个问题是在安装 ios7 后几个小时前才出现的。 :-( 查看此页面 (w3schools.com/tags/tag_fieldset.asp) 也会出现问题。

@ChrisValdivia。我尝试使用空白页和字段集，但它不起作用。所以我最终使用了 div 标签并为它创建了一个边框并将我的标签放在它下面。我的客户喜欢它。

【参考方案1】：

这里是标签字段集的解决方案：

<meta name="viewport" content="maximum-scale=1.0, user-scalable=no"/>

如果您将其他属性（例如 width=device-width、initial-scale=1.0）添加到 content 属性中，它将无法正常工作..

【参考方案2】：

也许你的问题可以通过定义一个视口来解决：

<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0"> 

【讨论】：

太棒了——这使得框架集的边框在两种模式下都出现了！不幸的是，这会阻止事物在切换方向时正确重新缩放。