HF1017: Firefox 中 OPTION 元素可以应用其设定的宽度并撑大其所在 SELECT 元素
作者：陆远
标准参考
根据 HTML4.01 规范中的描述，SELECT 元素创建一个下拉菜单 (menu)，其内的选项由 OPTION 元素呈现，一个 SELECT 元素必须至少包含一个 OPTION 元素。
关于 OPTION 元素的更多信息，请参考 HTML4.01 规范 17.6 The SELECT, OPTGROUP, and OPTION elements 中的内容。
问题描述
在 Firefox 中，OPTION 元素默认的 'display' 特性值为 'block'，即块级元素，故其可以设定宽度，且其设定的宽度可能会撑大其所在的 SELECT 元素。
造成的影响
此问题会导致 SELECT 元素的宽度在 Firefox 与其他浏览器之间产生差异。
受影响的浏览器
| Firefox |
|---|
问题分析
HTML4.01 及 CSS2.1 规范中并没有明确说明 OPTION 元素是否可以设定宽度。
分析以下代码：option.html
<!DOCTYPE html> <html> <head> </head> <body> <select> <option
style="width:200px;">aaa</option> </select> </body> </html>
上面代码中 OPTION 元素设定了宽度 200px。SELECT 元素没有明确设定宽度。
这段代码在各浏览器中运行效果为：
| IE6 IE7 IE8 Chrome Safari Opera | Firefox |
|---|---|
 |
 |
可以看到 Firefox 中设定的 200px 宽度的 OPTION 元素将 SELECT 元素撑大。
若明确的为 SELECT 元素设定一个宽度，则在 Firefox 中 OPTION 元素不再能够撑大其所在 SELECT 元素。
解决方案
若 SELECT 元素没有明确设定宽度，则应避免为其 OPTION 元素设定一个可能撑大它的宽度。
参见
知识库
相关问题
测试环境
| 操作系统版本: | Windows 7 Ultimate build 7600 |
|---|---|
| 浏览器版本: |
IE6
IE7 IE8 Firefox 3.6.10 Chrome 7.0.544.0 dev Safari 5.0.2 Opera 10.62 |
| 测试页面: | option.html |
| 本文更新时间: | 2010-10-11 |
关键字
option width select
本篇文章正在公测阶段，错误在所难免，欢迎大家提出宝贵的意见和建议。
发表评论 »
