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

Question

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

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

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

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

在桌面上工作正常，问题出在 iphone 移动设备上(safari、chrome 和 opera)。

谢谢，希望有人能阐明解决方案吗？史蒂夫

Answer 1

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

 select { width: 6em; }

当菜单打开时(当元素获得焦点时)，选项将以其上下文所需的宽度出现，但这将出现在页面内容顶部的“层”中，因此不应干扰布局。

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