頁面設計中a標籤內巢狀div標籤的高度問題
阿新 • • 發佈:2019-02-10
偶然設計一個小頁面,發現的這個問題,為了簡單說明,附上程式碼(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只有空格部分出現,沒有加空格( )的依舊沒有。
頭痛了很久,仍然得不到解決,嘗試了a:link,a:active這兩個是連結一般和被按下的狀態,介面更蛋疼,FF下直接消失。
更嚴重的是,在除錯過程中,IE6直接爆出0x00000指令錯誤的崩潰資訊,第二次開啟,在去除line-height和font-size屬性後,滑鼠選中div標籤(全選)直接退出!
後來發現,前面的情況用滑鼠全選都崩潰退出,微軟!!!
目前正在研究,惹毛我就逆向,結果再另文與大家分享吧,也希望知道解決方法的同志不吝賜教!