“IE7中下拉框显示不全”问题的原因与解决方案

kroll01

浏览: 20924 次
性别:
来自: 花果山

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (10)

社区版块

存档分类

IE CSS 浏览器 HTML XHTML

最初发现遇到“IE7中下拉框显示不全”这个问题时，一直以为是由于IE7的浏览器的兼容问题，并未找到这个问题的解决方案。但是开发应用系统过程中，不少用户都反应使用IE7浏览器时，出现下拉框显示不完整的情况。随着IE7不断的普及，会有更多的用户遇到同样的问题，所以这个问题必须解决，问题是怎么解决，问题出在哪里?
   查找了几天，查看jsp是否哪里写错了，但是并未找到结果。后来安装了IE7浏览器后，在本地重现了一下，部分下拉框还是出现缺失的现象，我突然发现有的页面下拉框是完整的，而有的页面是缺失的，难道页面有什么区别？我仔细比较了一下完整显示下拉框和缺失显示下拉框的页面，发现它们的区别在于页面声明的部分"<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">",难道是IE7不支持该标签，或者说该标签在IE7浏览器已经过时了？我删除该标签后，验证了一下，确实问题是出在这里。

在网上收集整理了一些IE6和IE7关于CSS兼容表现的资料
JSP的DOCTYPE声明说明：
html
PUBLIC
"-// W3C// DTD
HTML 4.01 Transitional// EN"   "http://www.w3.org/TR/html4/loose.dtd">
(1) (2) (3) (4) (5) (6) (7) (8)

[Top Element]   [Availability]   "[Registration]// [Organization]// [Type]   [Label]// [Language]"   "[URL]">
(1) (2) (3) (4) (5) (6) (7) (8)

(1) Top Element: DTD中声明的最顶层元素，例如html。
(2) Availability: 指示标识符是公共标识符号（PUBLIC）还是系统资源（SYSTEM），例如本地文件、url等。
(3) Registration: 指示组织是否注册为ISO成员，+表示已经注册为ISO成员，-表示没有注册。W3C没有注册，所以使用-。
(4) organization: 对于HTML、XHTML而言指维护DTD的组织标识符，W3C。
(5) Type: Public Text Class，引用对象的类型，对于HTML、XHTML而言为DTD。
(6) Label: Public Text Description，引用内容的唯一名称描述，Label里面可以包含一个版本号（4.01），可以包含一个Defintion（有三种Definition: Frameset, Strict, Transitional，下面会描述）。
(7) Language: 语言代码。
(8) URL: 引用DTD的url。
各个浏览器对HTML、CSS的处理，在细节上存在很多差异，为了向W3C标准靠近，并且HTML、CSS的标准也在不断的发展，因此同一个浏览器的不同版本之间，也会存在细节处理上的不一致性。现在浏览器使用DOCTYPE声明来决定该使用那种模式处理HTML、CSS，通常提到的有standards mode（标准模式，strict Mode）和quirks mode（兼容模式compliant mode）。标准模式指浏览器采用尽量靠近目前W3C规范的方式，支持目前版本的HTML、XHTML、CSS规范；兼容模式指浏览器按照以前的老版本的方式处理，以兼容那些旧版本的web应用。另外需要注意的是，虽然目前主要的浏览器都支持这两种模式，但都有差别，例如Firefox除了上面两种模式外，还有一个almost standards mode。
下面是HTML 4.01的DTD，分别为Strict, Transitional, Frameset

IE 6 CSS增强、IE 7 CSS兼容性
References: Cascading Style Sheet Compatibility in Internet Explorer 7、 CSS Enhancements in Internet Explorer 6
Label中的Definition三种类型：Frameset，支持FRAMESET文档；Transitional，支持除了FRAMESET以外其它所有元素；Strict，不支持W3C准备淘汰的元素、属性。这种描述有点让人糊涂，也无法跟标准standards mode、quirks mode对应上，至于具体的定义可以参考W3C标准。

下面这个表格是比较有用的：
Label                      Definition         URL present         URL not present
No !DOCTYPE present                             Off                    Off
HTML (No Version Present)                        Off                    Off
HTML 2.0                                         Off                    Off
HTML 3.0                                         Off                    Off
HTML 3.2                                         Off                    Off
HTML 4.0                 No Definition Present   On                     On
HTML 4.0                 Frameset                On                     Off
HTML 4.0                 Transitional            On                     Off
HTML 4.0                 Strict                  On                     On
XHTML                                            On                     On
XML                                              On                     On
Unrecognized !DOCTYPE                            On                     On

其中On表示使用strict mode（standards mode），Off表示使用compliant mode（quirks mode）。URL present/URL not present表示DTD文档的url是否有在DOCTYPE中声明；Definition为空或者No Definition Present表示Definition没有定义。从IE 6开始支持这两种模式的切换，在strict mode下，IE尽量保持与W3C标准一致，而compliant mode下，IE将保持与以前的IE版本兼容。用这个表格，对照1中几种DOCTYPE可以知道，只有在strict mode下，IE 7才支持filter:progid:DXImageTransform.Microsoft.Alpha这个滤镜。让人奇怪的是，也只有在strict mode下，IE 7才支持filter: alpha(opacity=60)，compliant mode下是不支持的，而这个写法是针对IE 5.5之前版本的。
在strict mode下面，两个比较重要的差异点：
a) Box的height、width计算问题

CSS标准中，width、height指图中Content的宽度、高度，而IE在计算宽度、高度时，将包括padding、border

分享到：