1. 程式人生 > >頁面設計中a標籤內巢狀div標籤的高度問題

頁面設計中a標籤內巢狀div標籤的高度問題

偶然設計一個小頁面,發現的這個問題,為了簡單說明,附上程式碼(UTF-8)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	.all{ width:128px; height:64px; border:#808080 solid 1px; overflow:hidden;}
	.all a,a:visited #reg{ width:128px; height:32px; background:url(bg.gif) 0px 0px no-repeat;}
	.all a:hover #reg{ width:128px; height:32px; background:url(bg.gif) 0px -32px no-repeat;}
	.all a,a:visited #log{ width:128px; height:32px; background:url(bg.gif) 0px -64px no-repeat;}
	.all a:hover #log{ width:128px; height:32px; background:url(bg.gif) 0px -96px no-repeat;}
</style>
<title>無標題文件</title>
</head>

<body>
<div class="all">
	<a href="#"><div id="reg"></div></a>
	<a href="#"><div id="log"></div></a>
</div>
<label style="color:#fe1010;">
	<script language="javascript">
		var e = document.getElementById("reg");
		document.write("reg: ("+e.offsetLeft+","+e.offsetTop+")["+e.clientWidth+"x"+e.clientHeight+"]<br />");
		e = document.getElementById("log");
		document.write("log: ("+e.offsetLeft+","+e.offsetTop+")["+e.clientWidth+"x"+e.clientHeight+"]\r\n");
	</script>
</label>
</body>
</html>


為了防止因CSDN的系統問題,導致程式碼無法閱讀,這裡分別貼上各段程式碼的截圖:

很簡單,就是避免使用指令碼(這裡的指令碼是為了debug,顯示div的位置大小),實現滑鼠經過的時候,更換div的背景,按照上面的程式碼,完全沒有問題了(IE6截圖):

然而,當我們把a標籤的href屬性更改時,也就是寫上我們的實際連結,比如登入的連結地址login.cgi(CGI的站點,編譯執行的速度極高)

這時候,發現這些div都不見了!,哪個“a”的“href”不是“#”,哪個就消失!

對於火狐(Firefox),連是“#”的時候,也是不見的,更加悲慘!

主觀感覺是行高等問題,因為火狐對於沒有內容的元素,將會渲染為0x0大小!於是改了程式碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	.all{ width:128px; height:64px; border:#808080 solid 1px; overflow:hidden; text-decoration:none;}
	.all a,a:visited #reg{ width:128px; height:32px; line-height:32px; font-size:32px; background:url(bg.gif) 0px 0px no-repeat;}
	.all a:hover #reg{ width:128px; height:32px; line-height:32px; font-size:32px; background:url(bg.gif) 0px -32px no-repeat;}
	.all a,a:visited #log{ width:128px; height:32px; background:url(bg.gif) 0px -64px no-repeat;}
	.all a:hover #log{ width:128px; height:32px; background:url(bg.gif) 0px -96px no-repeat;}
</style>
<title>無標題文件</title>
</head>

<body>
<div class="all">
	<a href="reg.cgi"><div id="reg"> </div></a>
	<a href="login.cgi"><div id="log"> </div></a>
</div>
<label style="color:#fe1010;">
	<script language="javascript">
		var e = document.getElementById("reg");
		document.write("reg: ("+e.offsetLeft+","+e.offsetTop+")["+e.clientWidth+"x"+e.clientHeight+"]<br />");
		e = document.getElementById("log");
		document.write("log: ("+e.offsetLeft+","+e.offsetTop+")["+e.clientWidth+"x"+e.clientHeight+"]\r\n");
	</script>
</label>
</body>
</html>


這下,Firefox中只有滑鼠經過的時候出現圖片,IE6只有空格部分出現,沒有加空格(&nbsp;)的依舊沒有。

頭痛了很久,仍然得不到解決,嘗試了a:link,a:active這兩個是連結一般和被按下的狀態,介面更蛋疼,FF下直接消失。

 更嚴重的是,在除錯過程中,IE6直接爆出0x00000指令錯誤的崩潰資訊,第二次開啟,在去除line-height和font-size屬性後,滑鼠選中div標籤(全選)直接退出!

後來發現,前面的情況用滑鼠全選都崩潰退出,微軟!!!

目前正在研究,惹毛我就逆向,結果再另文與大家分享吧,也希望知道解決方法的同志不吝賜教!