[求助]UL在IE与FireFox中的兼容问题-Web标准化网页设计讨论区-近水论坛

近水论坛Web标准化网页设计讨论区[求助]UL在IE与FireFox中的兼容问题

您是本帖的第116位阅读者

qingtian

等级：婴儿帖子：1积分：2注册时间：2008-3-22 9:44:27

发表于：2008-3-22 9:46:55资料发送短消息加为好友

楼主

[求助]UL在IE与FireFox中的兼容问题

<!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" /> <title>无标题文档</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="top"> <div class="search"><ul> <li>searching</li> <li><img src="http://www.cd0592.com/search.jpg" /></li> <li>Contact us</li> <li><img src="http://www.cd0592.com/tel.jpg" /></li> </ul> </div> <div id="menu"><ul> <li>Home</li> <li id="line"><img src="http://www.cd0592.com/bg2.gif" /></li> <li>About us</li> <li><img src="http://www.cd0592.com/bg2.gif" /></li> <li>Chair&Hammock </li> <li><img src="http://www.cd0592.com/bg2.gif" /></li> <li> Cooler&Bag </li> <li><img src="http://www.cd0592.com/bg2.gif" /></li> <li>Marts Flask&Mug </li> <li><img src="http://www.cd0592.com/bg2.gif" /></li> <li>Contacts us</li> <li><img src="http://www.cd0592.com/bg2.gif" /></li> </ul></div> </div> </body> </html>

在FF变的正常了,但IE却是向上了,不知道是哪儿出了问题?

还有就是字体与线的高度问题

字体的高度想要在线的中间,有什么方法?

近水全力打造公益性开放的Web标准技术交流平台

郁闷

等级：婴儿帖子：4积分：40注册时间：2007-12-23 15:58:38

发表于：2008-3-22 9:56:59资料发送短消息加为好友

2楼

1、首先要使contact us不换行。（white-space:nowrap）

2、将search层的高度设置为35px。（因为30px时设置overflow:hidden情况下图片显示不全）

3、menu的padding:30px 0 0 15px。（由于search层中IE下的文字换行，而FF不换行，所以造成IE和FF下显示位置有差异）

4、给#menu li增加height:30px;line-height:30px。（由于menu li中图片的高度为30px，要想让文字垂直居中，就要设置高度和行间距为30px）

完成代码：

<!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" /> <title>无标题文档</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="top"> <div class="search"><ul> <li>searching</li> <li><img src="http://www.cd0592.com/search.jpg" /></li> <li>Contact us</li> <li><img src="http://www.cd0592.com/tel.jpg" /></li> </ul> </div> <div id="menu"><ul> <li>Home</li> <li id="line"><img src="http://www.cd0592.com/bg2.gif" /></li> <li>About us</li> <li><img src="http://www.cd0592.com/bg2.gif" /></li> <li>Chair&Hammock </li> <li><img src="http://www.cd0592.com/bg2.gif" /></li> <li> Cooler&Bag </li> <li><img src="http://www.cd0592.com/bg2.gif" /></li> <li>Marts Flask&Mug </li> <li><img src="http://www.cd0592.com/bg2.gif" /></li> <li>Contacts us</li> <li><img src="http://www.cd0592.com/bg2.gif" /></li> </ul></div> </div> </body> </html>

近水全力打造公益性开放的Web标准技术交流平台