用于IE和Firefox的CSS黑客攻击 [英] CSS hacks for IE and Firefox
问题描述
嘿伙计们，
我使用带有无序列表的CSS和HTML构建了一个suckerfish导航菜单。我在Safari中测试了这个菜单，结果很好。当我完成后，我在Firefox中测试它，然后在IE中测试（我知道我应该事先做到这一点）并注意到两个浏览器显示菜单的方式与Safari不同。 Firefox中的下拉悬停状态存在问题，并且菜单在IE中被破坏（我认为它可能是表格问题）。
我对Firefox的IE浏览器不太了解。我不知道如果我应该为不同的浏览器或什么构建一个单独的样式表。如果有人能帮我解决这个问题，或者只是指出我正确的方向，我将不胜感激。下面是我用于无序列表的CSS。
谢谢
Hey guys,
I have built a suckerfish navigation menu using CSS and HTML with unordered lists. I was testing this menu in Safari, and it came out good. When I finished I tested it in firefox and then in IE ( I know I should have done this before hand) and noticed that both browsers displayed the menu differently than Safari. There is an problem with the dropdown hover state in Firefox, and the menu is just mangled in IE (I think it may be a table issue).
I do not know much about CSS hacks for IE of Firefox. I don''t know If I should build a seperate style sheet for the different browsers or what. I would appreciate if someone would help me out on this, or just point me in the right direction. Below is the CSS I use for my unordered lists.
Thanks
推荐答案
唯一的浏览器通常需要黑客是IE。如果您将标记写入标准，那么现代浏览器通常会排成一行。只有IE会给你带来麻烦。但IE浏览器的错误和怪癖都是已知的，黑客也是如此，我们可以使用条件评论。修复IE。单独的样式表是不必要的。
请发布HTML或链接。 CSS是一方面。 HTML是另一种。
The only browser that usually needs hacking is IE. If you write your markup to standards, then modern browsers generally fall right into line. Only IE will cause you problems. But IEs bugs and quirks are known, as are the hacks, and we can use "conditional comments" to fix IE. Seperate stylesheets aren''t necessary.
Please post the HTML or a link. CSS is one hand. HTML is the other.
唯一通常需要黑客攻击的浏览器是IE。如果您将标记写入标准，那么现代浏览器通常会排成一行。只有IE会给你带来麻烦。但IE浏览器的错误和怪癖都是已知的，黑客也是如此，我们可以使用条件评论。修复IE。单独的样式表是不必要的。
请发布HTML或链接。 CSS是一方面。 HTML是另一个。
The only browser that usually needs hacking is IE. If you write your markup to standards, then modern browsers generally fall right into line. Only IE will cause you problems. But IEs bugs and quirks are known, as are the hacks, and we can use "conditional comments" to fix IE. Seperate stylesheets aren''t necessary.
Please post the HTML or a link. CSS is one hand. HTML is the other.
感谢您的回复。这是html。我已根据今天在线研究的一些事情尝试了一些条件评论，但我没有运气。要么我做错了，要么我看的例子都不适用于我的代码。
[html]
<！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"含量=" text / html的;字符集= UTF-8英寸/>
< title> CSS导航| SNI< / title>
< link href =" navigation.css"的rel ="样式表"类型= QUOT;文本/ CSS" />
< / head>
< body>
< table width =" 760" border =" 0">
< tr>
< div id =" sniNav">
< div class =" my_nav">
< ul class =" select">
< li ID = QUOT;家用" class =" active">< a href =" home.html">< b> Home< / b>< / a>
< ul class =" sub">
< li>< a href ="＃"> The Front Page< / a>< / li>
< li< a href ="＃"> Police< / a>< / li>
< li>< a href ="＃"> Business< / a>< / li>
< li>< a href ="＃"> Biz Buzz< / a>< / li>
< li>< a href ="＃">照片< / a>< / li>
< li>< a href ="＃"> ; Ob告< / a>< / li>
< li>< a href ="＃">天气< / a>< / li>
< li>< a href ="＃">特殊报告< / a>< / li>
< li>< a href ="＃">更正< / a>< / li>
< li>< a href ="＃">移动新闻< / a>< ; / li>
< li>< a href ="＃"> RSS< / a>< / li>
< li> < a href ="＃">搜索< / a>< / li>
< li>< a href ="＃">日历视图< / a>< / li>
< / li>
< / ul>
< / li>
< li id =" news" class =" line">< a href =" news.html">< b> News< / b>< / a>
< ul class =" sub">
< li>< a href ="＃"> The Front Page< / a>< / li>
< li< a href ="＃"> Police< / a>< / li>
< li>< a href ="＃"> Business< / a>< / li>
< li>< a href ="＃"> Biz Buzz< / a>< / li>
< li>< a href ="＃">照片< / a>< / li>
< li>< a href ="＃"> ; Ob告< / a>< / li>
< li>< a href ="＃">天气< / a>< / li>
< li>< a href ="＃">特殊报告< / a>< / li>
< li>< a href ="＃">更正< / a>< / li>
< li>< a href ="＃">移动新闻< / a>< ; / li>
< li>< a href ="＃"> RSS< / a>< / li>
< li> < a href ="＃">搜索< / a>< / li>
< li>< a href ="＃">日历视图< / a>< / li>
< / li>
< / ul>
< / li>
< li id =" sports" class =" line">< a href =" sports.html">< b> Sports< / b>< / a>
< ul class =" sub">
< li>< a href ="＃">钓鱼：卷轴报告< / a>< / li>
< ; li>< a href ="＃">高中足球记分牌< / a>< / li>
< li>< a href ="＃" >来自副业< / a>< / li>
< li>< a href ="＃">询问体育< / a>< / li>
< li>< a href ="＃">体育照片< / a>< / li>
< / li>
< / ul>
< / li>
< li id =" views" class =" line">< a href =" opinion.html">< b> Opinion< / b>< / a>
< ul class =" sub">
< li>< a href ="＃">给编辑的信件< / a>< / li>
< ; li>< a href ="＃">列< / a>< / li>
< li>< a href ="＃">来宾列< / a>< / li>
< li>< a href ="＃">卡通< / a>< / li>
< li>< a href ="＃">论坛< / a>< / li>
< li>< a href ="＃" >写信给我们< / a>< / li>
< / li>
< / ul>
< / li>
< li id =" blogs" class =" line">< a href =" blogs.html">< b> Blogs< / b>< / a>
< ul class =" sub">
< li>< a href ="＃">在行之间< / a>< / li>
< li>< a href ="＃">岛上的博客< / a>< / li>
< li>< a href ="＃"> ; Buzz博客< / a>< / li>
< li>< a href ="＃">编辑''注释< / a>< / li>
< li>< a href ="＃">来自副业< / a>< / li>
< li>< a href ="＃">在岛上，离开路径< / a>< / li>
< li>< a href ="＃">天气观看< / a>< / li>
< / li>
< / ul>
< / li>
< li id =" lifestyle" class =" line">< a href =" lifestyle.html">< b> Lifestyle< / b>< / a>
< ul class =" sub">
< li>< a href ="＃">食物< / a>< / li>
< li> < a href ="＃">娱乐< / a>< / li>
< li>< a href ="＃"> Health< / a> ;< / li>
< li>< a href ="＃">旅行< / a>< / li>
< li>< a href ="＃"> OurFaith< / a>< / li>
< li>< a href ="＃">公告< / a>< / li>
< li>< a href ="＃">公告栏< / a>< / li>
< / li>
< / ul>
< / li>
< li id =" ;社区" class =" line">< a href =" community.html">< b>社区< / b>< / a>
< ul class =" sub">
< li>< a href ="＃"> Bacliff< / a>< / li>
< li> < a href ="＃"> BayouVista< / a>< / li>
< li>< a href ="＃"> Bolivar< / a> ;< / li>
< li>< a href ="＃"> Clear Lake Shores< / a>< / li>
< li>< a href ="＃"> Dickinson< / a>< / li>
< li>< a href ="＃"> Friendswood< / a>< / li>
< li>< a href ="＃"> Galveston< / a>< / li>
< li>< a href ="＃"> High Island< / a>< / li>
< / li>
< / ul>
< / li>
< li id =" apnews" class =" line">< a href =" apnews.html">< b> AP新闻< / b>< / a>
< ul class =" ; sub">
< li>< a href ="＃"> Texas< / a>< / li>
< li> ;< a href ="＃"> Nation< / a>< / li>
< li>< a href ="＃"> Politics< / a>< / li>
< li>< a href ="＃">业务< / a>< / li>
< ; li>< a href ="＃">技术< / a>< / li>
< li>< a href ="＃">体育< ; / a>< / li>
< li>< a href ="＃"> Health< / a>< / li>
< li>< a href ="＃">娱乐< / a>< / li>
< li>< a href ="＃"> ;播客< / a>< / li>
< li>< a href ="＃">视频< / a>< / li>
< / li>
< / ul>
< / li>
< li id =" services" class =" line">< a href =" services.html">< b>服务< / b>< / a>
< ul class =" sub">
< li>< a href ="＃">报纸发送< / a>< / li>
< li> ;< a href ="＃">报纸电子版< / a>< / li>
< li>< a href ="＃">报亭位置< / a>< / li>
< li>< a href ="＃">假期停止< / a>< / li>
< li>< a href ="＃">订单返回问题< / a>< / li>
< li>< a href =" ;＃">教育中的报纸< / a>< / li>
< li>< a href ="＃">重印< / a>< / li>
< li>< a href ="＃">员工目录< / a>< / li>
< / li>
< / ul>
< / li>
< li id =&quo吨;分类" class =" line">< a href =" classifieds.html">< b> Classifieds< / b>< / a>
< ul class =" sub">
< li>< a href ="＃">工作< / a>< / li>
< li> < a href ="＃"> Homes< / a>< / li>
< li>< a href ="＃"> Autos< / a> ;< / li>
< li>< a href ="＃">所有商品< / a>< / li>
< ; li>< a href ="＃">服务目录< / a>< / li>
< li>< a href ="＃">放置广告< / a>< / li>
< / li>
< / ul>
< / li> ;
< li id =" shopping" class =" line">< a href ="＃">< b> Shopping< / b>< / a>
< ul class =" sub">
< li>< a href ="＃">餐饮指南< / a>< / li>
< li>< a href ="＃">报纸广告/插页< / a>< / li>
< li>< a href ="＃" ;>如何做广告< / a>< / li>
< / li>
< / ul>
< ; / li>
< li id =" help" class =" line">< a href ="＃">< b>帮助< / b>< / a>
< ul class =" sub">
< li>< a href ="＃">餐饮指南< / a>< / li>
< li>< a href ="＃">报纸广告/插页< / a>< / li>
< li>< a href ="＃" ;>如何做广告< / a>< / li>
< / li>
< / ul>
< ; / li>
< / ul>
< / div>
< / div>
< / tr>
< / table>
< / body>
< / html>
[/ html]
Thanks for the reply. Here is the html. I have tried some conditional comments based on some things I have researched online today, but I''ve had no luck. Either i''m doing it wrong, or the examples I looked at don''t really apply to my code.
[html]
<!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>CSS Navigation | SNI</title>
<link href="navigation.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="760" border="0">
<tr>
<div id="sniNav">
<div class="my_nav">
<ul class="select">
<li id="home" class="active"><a href="home.html"><b>Home</b></a>
<ul class="sub">
<li><a href="#">The Front Page</a></li>
<li><a href="#">Police</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Biz Buzz</a></li>
<li><a href="#">Photographs</a></li>
<li><a href="#">Obituaries</a></li>
<li><a href="#">Weather</a></li>
<li><a href="#">Special Reports</a></li>
<li><a href="#">Corrections</a></li>
<li><a href="#">Mobile News</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Calendar View</a></li>
</li>
</ul>
</li>
<li id="news" class="line"><a href="news.html"><b>News</b></a>
<ul class="sub">
<li><a href="#">The Front Page</a></li>
<li><a href="#">Police</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Biz Buzz</a></li>
<li><a href="#">Photographs</a></li>
<li><a href="#">Obituaries</a></li>
<li><a href="#">Weather</a></li>
<li><a href="#">Special Reports</a></li>
<li><a href="#">Corrections</a></li>
<li><a href="#">Mobile News</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Calendar View</a></li>
</li>
</ul>
</li>
<li id="sports" class="line"><a href="sports.html"><b>Sports</b></a>
<ul class="sub">
<li><a href="#">Fishing: Reel Report</a></li>
<li><a href="#">High School Football Scoreboard</a></li>
<li><a href="#">From the Sidelines</a></li>
<li><a href="#">Ask Sports</a></li>
<li><a href="#">Sports Photographs</a></li>
</li>
</ul>
</li>
<li id="opinions" class="line"><a href="opinions.html"><b>Opinion</b></a>
<ul class="sub">
<li><a href="#">Letters to the Editor</a></li>
<li><a href="#">Columns</a></li>
<li><a href="#">Guest Columns</a></li>
<li><a href="#">Cartoons</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Write Us</a></li>
</li>
</ul>
</li>
<li id="blogs" class="line"><a href="blogs.html"><b>Blogs</b></a>
<ul class="sub">
<li><a href="#">Between The Lines</a></li>
<li><a href="#">Blogging on the Island</a></li>
<li><a href="#">Buzz Blog</a></li>
<li><a href="#">Editors'' Notes</a></li>
<li><a href="#">From the Sidelines</a></li>
<li><a href="#">On the Island, Off the Path</a></li>
<li><a href="#">Weather Watch</a></li>
</li>
</ul>
</li>
<li id="lifestyle" class="line"><a href="lifestyle.html"><b>Lifestyle</b></a>
<ul class="sub">
<li><a href="#">Food</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Health</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">OurFaith</a></li>
<li><a href="#">Announcements</a></li>
<li><a href="#">Bulletin Board</a></li>
</li>
</ul>
</li>
<li id="community" class="line"><a href="community.html"><b>Community</b></a>
<ul class="sub">
<li><a href="#">Bacliff</a></li>
<li><a href="#">BayouVista</a></li>
<li><a href="#">Bolivar</a></li>
<li><a href="#">Clear Lake Shores</a></li>
<li><a href="#">Dickinson</a></li>
<li><a href="#">Friendswood</a></li>
<li><a href="#">Galveston</a></li>
<li><a href="#">High Island</a></li>
</li>
</ul>
</li>
<li id="apnews" class="line"><a href="apnews.html"><b>AP News</b></a>
<ul class="sub">
<li><a href="#">Texas</a></li>
<li><a href="#">Nation</a></li>
<li><a href="#">Politics</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Health</a></li>
<li><a href="#">Entertainment</a></li>
<li><a href="#">Podcasts</a></li>
<li><a href="#">Video</a></li>
</li>
</ul>
</li>
<li id="services" class="line"><a href="services.html"><b>Services</b></a>
<ul class="sub">
<li><a href="#">Newspaper Delivery</a></li>
<li><a href="#">Newspaper E-Edition</a></li>
<li><a href="#">Newsstand Locations</a></li>
<li><a href="#">Vacation Stops</a></li>
<li><a href="#">Order Back Issues</a></li>
<li><a href="#">Newspapers in Education</a></li>
<li><a href="#">Reprints</a></li>
<li><a href="#">Staff Directory</a></li>
</li>
</ul>
</li>
<li id="classifieds" class="line"><a href="classifieds.html"><b>Classifieds</b></a>
<ul class="sub">
<li><a href="#">Jobs</a></li>
<li><a href="#">Homes</a></li>
<li><a href="#">Autos</a></li>
<li><a href="#">All Listings</a></li>
<li><a href="#">Service Directory</a></li>
<li><a href="#">Place an Ad</a></li>
</li>
</ul>
</li>
<li id="shopping" class="line"><a href="#"><b>Shopping</b></a>
<ul class="sub">
<li><a href="#">Dining Guide</a></li>
<li><a href="#">Newspaper Ads/Inserts</a></li>
<li><a href="#">How to Advertise</a></li>
</li>
</ul>
</li>
<li id="help" class="line"><a href="#"><b>Help</b></a>
<ul class="sub">
<li><a href="#">Dining Guide</a></li>
<li><a href="#">Newspaper Ads/Inserts</a></li>
<li><a href="#">How to Advertise</a></li>
</li>
</ul>
</li>
</ul>
</div>
</div>
</tr>
</table>
</body>
</html>
[/html]
验证你的html是否存在49个错误列表。
Validate your html for that list of 49 errors.
这篇关于用于IE和Firefox的CSS黑客攻击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
