当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > HTML表单元素覆盖样式元素问题及其补救之道

HTML/XHTML教程
CSS基础:设计网页常用规范详解
CSS教程:十步学会用css建站
CSS基础:24条网页布局开发小技巧
CSS教程:在网页布局中简单实现垂直居中的办法
css基础教程:颜色和文本属性的控制
专家总结:网页设计师必须遵守的十条守则
html技巧:超级链接a的提示和打开方式
css教程:学习背景图像属性background
例说网页Semantics:Html/Xhtml是否真正符合标准
IE7与web标准设计系列教程:前言
IE7与web标准设计系列教程:更丰富的CSS选择符
IE7与web标准设计系列教程:修正引起页面布局混乱的祸首
web标准教程:IE6和IE7的共存
web标准:IE多版本共存的解决方案:IETester
CSS基础教程:认识CSS选择符
web标准:比较IE6与IE7,放纵的孩子与严厉的父亲
学好标准CSS的模型是否必须放弃IE?
CSS教程:如何处理有冲突的CSS规则
教你用html和css写出漂亮正规的Blog
CSS基础:如何避免table强迫症

HTML/XHTML教程 中的 HTML表单元素覆盖样式元素问题及其补救之道


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 33 ::
收藏到网摘: n/a

  在设计HTML页面的过程中经常会遇到表单元素覆盖样式元素引起的问题,图一就是一个典型的例子。不要小看这个貌似“低级”的问题,即使一些规模较大的网站上类似的问题也绝不鲜见。本文探讨了造成这一问题的根本原因,并提出一种补救办法——之所以说补救办法而不是一劳永逸的解决办法,是因为微软和NetScape这两个巨头也还没有对策。

一、HTML元素的显示优先级

  HTML中常用的表单元素包括:文本区域(TEXTAREA),列表框(SELECT),文本输入框(INPUT type=text),密码输入框(INPUT type=password),单选输入框(INPUT type=radio),复选输入框(INPUT type=checkbox),等等。常见的非表单元素包括:链接标记(A),DIV标记,SPAN标记,TABLE标记,等等。表单元素覆盖样式元素的根本原因在于HTML元素默认的显示优先级规则,例如:帧元素总是比其他HTML元素优先,因此也总是显示在最前面;表单元素总是比所有非表单元素优先。
 
  所有这些HTML元素又可以根据其显示要求分成两类,即有窗口的HTML元素(Windowed Element),无窗口的HTML元素(Windowless Element)。有窗口的元素包括:SELECT元素,OBJECT元素,插件,IE 5.01以及更早版本中的IFRAME元素。无窗口的元素包括:大多数的普通HTML元素,如链接和TABLE标记,除了SELECT元素之外的大多数表单元素,NS6+/IE 5.5以及更高版本中的IFRAME元素。本文讨论的问题主要与有窗口的HTML元素有关,问题的症结其实就在于操作系统默认总是把有窗口的元素显示在无窗口的元素前面。

  二、浏览器类型与显示优先级

  按照浏览器类型比较,HTML元素的显示次序也有所不同,总结如下:

  ⑴ Netscape/Mozilla

  在NS浏览器6.0以前的版本中,表单元素总是比其他HTML元素有更高的优先级。但在NS 6+浏览器中,IFRAME元素和所有表单元素的显示次序或者由CSS的z-index属性值确定,或者由它们在HTML页面中出现的次序确定,但SELECT元素除外。

⑵ Internet Explorer

  在最新的IE浏览器(6.0)中,IFRAME元素和所有表单元素根据z-index属性值或它们在HTML页面中出现的次序来确定显示优先次序,但SELECT元素除外。

  ⑶ Opera

  在最新的Opera(7.10*)浏览器中,包括SELECT在内的所有表单元素根据z-index属性或它们在HTML页面中的出现次序来确定显示优先级。但是,最新的Opera浏览器不将IFRAME作为无窗口元素显示,IFRAME被看做有窗口元素,在显示次序上要比所有无窗口元素优先。

  三、CSS的z-index属性

  我们知道,CSS的z-index属性可以用来控制任意HTML元素显示时的覆盖次序。当多个HTML元素重叠在同一空间中时,z-index值较大的元素将覆盖z-index值较小的元素。

  但z-index属性值不是万能的。如前所述,有窗口的元素总是显示在无窗口元素的前面,z-index属性值只有在同一类元素之间才起决定作用。形象地说,有窗口元素和无窗口元素就像画在同一浏览器窗口的两块不同画布上,两类元素分别自成体系,它们的z-index属性也只相对于同一画布上的其他元素起作用。

  四、补救之道

  就目前的浏览器而言,一种比较有效的补救办法是:当无窗口元素需要覆盖有窗口元素时,运用脚本程序动态地隐藏有窗口元素。下面是一个完整的例子:

<html><head>
<style type="text/css">
.menuBlock{position:relative;top:14px;width:165px;border:2px solid black;}
#subMenus{position:relative;left:15px;top:15px;width:171px;
padding-left:2px;padding-right:2px;border:2px solid black;
z-index:100;visibility:hidden;}
#lb_1{position:absolute;left:10px;top:40px; }
</style>

<script type="text/javascript">
var isActive = false;

function showMenu(){
isActive = true;
//document.getElementById("lb_1").style.visibility="hidden";
document.getElementById("subMenus").style.visibility="visible";
}

function hideMenu(){
isActive = false;
setTimeout('hide()',100);
}

function hide(){
if(!isActive){
document.getElementById("subMenus").style.visibility = "hidden";
document.getElementById("lb_1").style.visibility="visible";
}
}

function setStyle(menuItem){
isActive = true;
menuItem.style.backgroundColor = "Gray";
menuItem.style.col

评论 (0) All

登陆 还没注册?