打印

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