如何解决填充不适用于 Safari 和 IE 选择列表的问题？

填充不适用于 Safari 和 IE 选择列表：故障排除指南

尽管符合 W3 规范，但填充可能无法在在 Safari 和 IE 浏览器上选择列表。出现这种差异的原因是这些浏览器使用的渲染引擎的限制。

了解问题

在您的代码示例中：

<select style="padding-left:15px">
  <option>male</option>
  <option>female</option>
</select>

Safari 和 IE 无法应用指定的左侧填充。

解决方案：使用文本缩进

由于不支持填充，另一种方法是使用文本缩进。此属性将选择列表中的文本移动指定的量，从而产生填充的错觉。

代码修改

在 CSS 中，替换 padding-left 属性带有文本缩进：

#sexID {
  text-indent: 15px;
  width: 258px; // Adjusted for text-indent
}

注意：请记住调整选择列表的宽度以适应文本缩进。

其他注意事项

• 确保所选的 CSS 文档类型不会阻止填充应用程序。
• 检查是否有任何可能覆盖您的自定义 CSS 的特定于浏览器的样式表。
• 使用浏览器开发人员工具检查渲染的 HTML 和 CSS 以识别任何潜在的冲突。

以上是如何解决填充不适用于 Safari 和 IE 选择列表的问题？的详细内容。更多信息请关注PHP中文网其他相关文章！