iphone - SELECT 中的 OPTION 元素太长并且破坏了移动布局

Question

我有一个响应式网站设计，其中大部分都可以正常工作。

在结帐页面上，虽然我有一个Select元素用于选择一个国家。有些选项很长，例如“刚果民主共和国”。这会将布局推到右侧，破坏布局并使布局滚动水平 - 这太可怕了；）

如果我完全删除选择，则布局显示正常。如果我删除所有选项并将简短的测试放在它们的位置上，它也可以正常工作。所以我很确定它的长选项是问题所在。Select 本身只有 50% 宽，因此不会超出屏幕 - 它是“不可见”选项元素。

这是一个临时链接： http: //moymadethis.com/oca/test.html

在台式机上工作正常，问题出在 iphone 移动设备（safari、chrome 和 opera）上。

谢谢，希望有人能解决这个问题吗？史蒂夫

Answer 1

通常在元素本身上设置宽度就足够了select（与在其父元素上设置宽度相反——如果需要，内部元素默认会溢出），例如

 select { width: 6em; }

当菜单打开时（当元素被聚焦时），选项将显示在其上下文所需的宽度中，但这将出现在页面内容顶部的“层”中，因此它不应该干扰布局。

如果问题仍然存在，请发布最少的 HTML 和 CSS 代码以重现问题并确定测试的平台和浏览器。

Answer 2

我最近在我正在从事的项目中遇到了完全相同的问题。我发现解决方案是在选择宽度上使用 !important，在我的例子中是 100%。这使得该解决方案可以在移动设备和桌面设备上完美运行。

Answer 3

尝试在选择元素上使用最大宽度，例如#myselect {max-width:95%;}