嵌套 IE 中的标签
我正在用 HTML 编写一个地图,当鼠标悬停在某些点上时,它利用背景图像和图像地图来创建悬停在框上的操作。下面是其中一个框的一段代码,没有相关的 CSS。当我将链接添加到我的 URL(本节)TEST.COM
悬停在地图上的工作方式是使用链接类和 a:hover 属性。然而,IE 似乎认为它比所有其他浏览器更聪明,并假设我的超链接结束 href 标签也结束了整个框(一个类),有效地将链接下面的所有内容完全踢出框并保留它在页面一侧可见。整个框的预期结束 href 标记是代码块上的最后一个内容。自然,Firefox 完美地诠释了这一点。 IE 8 失败,兼容模式无法测试。
任何帮助让它发挥作用的帮助都会很棒。
所有不相关的内容均已替换为“测试”一词。
<li><a class="TEST" href="#" title="TEST"><span><b><font size="4"> <center>
<!-- School Info -->
TEST </font> <br /><font style="font-size: 12px;" >
TEST<br />
TEST<br />
(530) 582-2600 <br />
<a href="TEST.COM" style="text-align:center; padding-left: 80px;" title="TEST">TEST.COM </a><br /> </font>
</center></font> </b><br>
<center> <font size="4">TEST</font> </center>
<table width="195" border="0" style="padding-left: 10px; margin-left: 10px;">
<tr>
<td width="150">TEST <br /> TEST<br /> TEST </td></td>
<td width="150">TEST</td>
</tr>
</table>
</span></a></li>
I'm writing a map in HTML that utilizes a background image and an image map to create hover over boxes when mousing over certain points. Below is a section of code for one of the boxes, sans relevant CSS. I discovered an issue with IE when I added the link to my URL (this section) <a href="TEST.COM" style="text-align:center; padding-left: 80px;" title="TEST">TEST.COM </a>
The way the hover over map works is by using link classes and the a:hover property. However, IE seems to think that it is smarter than every other browser and assumes that my end ending href tag for just the hyperlink also ends the entire box (a class), effectively kicking everything below the link out of the box completely and leaves it visible on the side of the page. The intended ending href tag for the entire box is the very last thing on the code block. Naturally, Firefox interprets this perfectly.
Failure in IE 8, compatibility mode not available to test.
Any help on getting this to work would be great.
All non-relevant content has been replaced with the word test.
<li><a class="TEST" href="#" title="TEST"><span><b><font size="4"> <center>
<!-- School Info -->
TEST </font> <br /><font style="font-size: 12px;" >
TEST<br />
TEST<br />
(530) 582-2600 <br />
<a href="TEST.COM" style="text-align:center; padding-left: 80px;" title="TEST">TEST.COM </a><br /> </font>
</center></font> </b><br>
<center> <font size="4">TEST</font> </center>
<table width="195" border="0" style="padding-left: 10px; margin-left: 10px;">
<tr>
<td width="150">TEST <br /> TEST<br /> TEST </td></td>
<td width="150">TEST</td>
</tr>
</table>
</span></a></li>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您不能嵌套链接。 Firefox 正在以一种方式为您“解决这个问题”,而 IE 则以另一种方式进行。
如果您想“添加”信息的覆盖 DIV,您应该将其附加到链接外部的 DOM,并在需要时将其浮动在页面上(位置:绝对)。
You can not nest links. Firefox is "fixing this" for you one way, IE is doing it another.
If you want to "add" an overlay DIV of information, you should append it to the DOM outside the link and float it over the page (position:absolute) where needed.
和
标签已弃用
<font>
and<center>
tags are deprecated