LSDN

Lynn Studio Documents Network

• 原文: “Unnecessary Horizontal Scrollbar in IE Popups or Frames XHTML Bug”
• 翻译: Wink@Lynn Studio
• 转载时请注明原文及译者及出处

此译文为急于解决问题时仓促之作，疏忽及翻译简陋之处尚请见谅。关于IE该bug的讨论请见“关于IE在弹出或框架结构XHTML中出现横向滚动条的BUG”

Windows平台的Internet Explorer 6.0以及Mac平台的Internet Explorer 5.0存在一个bug，即框架或者弹出窗口中的页面即使在没有必要的情况下也会出现水平滚动条。出现的原因是其对XHTML 1.0 transitional doctype的解释缺陷。

这里给出一些解决方案。

如果想要解决这个问题，你需要选择一个最适合自己的解决方案。

方案 1：

在CSS定义中粘贴下面的代码：

html {
	overflow-y: scroll;
}

这会强制默认出现垂直滚动条，这样一来，从某些理由上来讲，便消去了IE对水平滚动条的需求。

优点：
• 完全解决了这个问题，允许你保持完整的XHTML doctype。

缺点：
• 即使不需要垂直滚动条的时候也强制其出现。请注意，不要把它放在关联其它页面的CSS中，比如说，框架的index页。

方案 2：

在CSS定义中粘贴下面的代码：

html {
	overflow-x: hidden;
	overflow-y: auto;
}

这会隐藏水平滚动条，并且设置垂直滚动条只在必要的时候出现。

优点：
• 在视觉上解决了这个问题。
• 在不必要的时候，未强制垂直滚动条出现。

缺点：
• 只是简单地隐藏了水平滚动条而已，并未真正修复这个问题。这样一来，你可能会遇到真的需要有位于当前页面之外的内容而需要水平滚动条的时候，但是它已经被强制隐藏了。

方案 3：

在CSS定义中粘贴下面的代码：

body {
	margin-right: -15px;
	margin-bottom: -15px;
}

这会在margin的水平和垂直方向上添加一个负值，IE添加了该精确数值后，便会去除对滚动条的需求假象。

优点：
• 在视觉上解决了这个问题。
• 未强制垂直滚动条出现。

缺点：
• 由于“人为创建”了15px的外边距（margin），所以无法使用该填充过的屏幕区域.

我自己用的并且推荐的是方案一。

强制的滚动条：

问题中的“修复”该bug的技术，同样可以用于其它目的。利用CSS，你可以有效地在Mozilla Firefox和Internet Explorer中显示或者隐藏垂直及水平滚动条。

强制显示滚动条：

html {
	overflow: scroll;
}

强制隐藏滚动条：

html {
	overflow: hidden;
}

隐藏IE的水平滚动条：

html {
	overflow-x: hidden;
}

隐藏IE的垂直滚动条：

html {
	overflow-y: hidden;
}

强制显示IE的水平滚动条：

html {
	overflow-x: scroll;
}

强制显示IE的垂直滚动条：

html {
	overflow-y: scroll;
}

强制显示Mozilla的水平滚动条：

html {
	overflow:-moz-scrollbars-horizontal;
}

注意： 仅仅强制显示水平滚动条。也就是说，即使需要显示垂直滚动条时，垂直滚动条也不会出现。

强制显示Mozilla的垂直滚动条：

html {
	overflow:-moz-scrollbars-vertical;
}

注意: 仅仅强制显示垂直滚动条。也就是说，即使需要显示水平滚动条时，水平滚动条也不会出现.

参考文章：

感谢Nikolaas De Geyndt出色的文档，为我提供了一些解决方法。

You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.