现在，我在这个网站上遇到了一个问题。我的按钮采用部分透明的PNG图像文件的形式，当悬停时会改变为按钮的另一种形式，并且一旦取消就会再次返回。出于某种原因，图像在它们旁边显示一个下划线的微型链接，它无缘无故地将所述图像略微向左推。但是，这不会发生在Internet Explorer上，而是发生在Google Chrome和Mozilla Firefox上。我已经尝试过使用CSS方法从图像中删除下划线，并且它可以工作，但是图像仍然会继续向左略微移动，并且它会破坏我的强迫症。有没有办法来解决这个问题？这是我的代码......
HTML 的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- START MAIN WEBSITE LAYOUT !-->
<meta property="og:image" content="http://toontownsfunnyfarm.com/images/facebook.png"/>
<meta property="og:title" content="Play for FREE! | Toontown's Funny Farm"/>
<meta property="og:url" content="https://www.toontownsfunnyfarm.com/play"/>
<meta property="og:description" content="A single-player video game loosely based off of Disney's Toontown Online. Brand new playgrounds, streets, storyline, tasks; you name it!"/>
<meta name="description" content="A single-player video game loosely based off of Disney's Toontown Online. Brand new playgrounds, streets, storyline, tasks; you name it!"/>
<meta name="keywords" content="Toontown, Toontown's Funny Farm, Disney, Club Penguin, Toontown Online, Disney's Toontown Online, Disney Interactive"/>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script>
function imgOn (img) {
if (document.images) {
document.images[img].src = eval(img + "_on.src");
}
}
function imgOff (img) {
if (document.images) {
document.images[img].src = eval(img + "_off.src");
}
}
</script>
</head>
<body text=#000000 link=#4477ff vlink=#4455bb alink=#ff5555
leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
<title>Play | Toontown's Funny Farm</title>
<script>
if (document.images) {
about_btn_on = new Image();
about_btn_on.src = "images/buttons/about_btn_lit.png";
about_btn_off = new Image();
about_btn_off.src = "images/buttons/about_btn.png";
screenshots_btn_on = new Image();
screenshots_btn_on.src = "images/buttons/screenshots_btn_lit.png";
screenshots_btn_off = new Image();
screenshots_btn_off.src = "images/buttons/screenshots_btn.png";
releasenotes_btn_on = new Image();
releasenotes_btn_on.src = "images/buttons/releasenotes_btn_lit.png";
releasenotes_btn_off = new Image();
releasenotes_btn_off.src = "images/buttons/releasenotes_btn.png";
staff_btn_on = new Image();
staff_btn_on.src = "images/buttons/staff_btn_lit.png";
staff_btn_off = new Image();
staff_btn_off.src = "images/buttons/staff_btn.png";
play_btn_on = new Image();
play_btn_on.src = "images/buttons/play_btn_rlvr.png";
play_btn_off = new Image();
play_btn_off.src = "images/buttons/play_btn.png";
}
</script>
<font face="verdana, arial, helvetica, sans-serif" size="1">
<table width="718" align=center border=0 cellpadding="0" cellspacing=0
bgcolor=#ffffff>
<tr>
<td colspan="5" align=left valign=top>
<a href="index.html">
<img src="images/header.png" draggable="false" border=0 width=718 height=312 />
</a>
</td>
</tr>
<tr>
<td align=left valign=top>
<table width=121 height=450 border=0 cellpadding=0 cellspacing=0
align=left valign=top>
<tr>
<td valign=top align=right>
<br>
<a href="about.html"
onMouseOver="imgOn('about_btn')"
onMouseOut="imgOff('about_btn')">
<img border=0 src="images/buttons/about_btn.png" draggable="false" width="105" name="about_btn"/>
</a>
<br>
<a href="screenshots.html"
onMouseOver="imgOn('screenshots_btn')"
onMouseOut="imgOff('screenshots_btn')">
<img border=0 src="images/buttons/screenshots_btn.png" draggable="false" width="105" name="screenshots_btn"/>
</a>
<br>
<a href="release-notes.html"
onMouseOver="imgOn('releasenotes_btn')"
onMouseOut="imgOff('releasenotes_btn')">
<img border=0 src="images/buttons/releasenotes_btn.png" draggable="false" width="105" name="releasenotes_btn"/>
</a>
<br>
<a href="staff.html"
onMouseOver="imgOn('staff_btn')"
onMouseOut="imgOff('staff_btn')">
<img border=0 src="images/buttons/staff_btn.png" draggable="false" width="105" name="staff_btn"/>
</a>
<br><br>
<a href="play.html"
onMouseOver="imgOn('play_btn')"
onMouseOut="imgOff('play_btn')">
<img border=0 src="images/buttons/play_btn.png" draggable="false" width="105" name="play_btn"/>
</a>
</td>
</tr>
<tr>
<td align=center>
<img src="images/props/seltzer_bottle_left.png" draggable="false" width="70"/>
</td>
</tr>
</table>
</td>
<!-- END MAIN WEBSITE LAYOUT !-->
<td align=center valign=top>
<table width=430 height=538 border=0 cellpadding=0 cellspacing=0 style="margin-left:30px">
<tr>
<td align=left valign=top>
<br>
<h1>Download Toontown's Funny Farm</h1>
<hr/>
<font size="3">
<p>Thank you for downloading Toontown's Funny Farm!</p>
</font>
<font size="2">
<p>In order to play the game, click the download link corresponding to your current operating system below.</p>
<p>Remember, Toontown's Funny Farm is a fan-made singleplayer game, with no intentions of making revenue of any sort. The game is being worked on by voluntary workers and production of the game may cease at any time if necessary. Please do not pressure us into working on the game; we'll update it in our own time.</p>
<a href="https://www.toontownsfunnyfarm.com/FunnyFarm1.3/FF1.3_setup_windows.exe">Windows Download</a><br>
<a href="https://www.toontownsfunnyfarm.com/FunnyFarm1.3/FF1.3_mac_osx.zip">Mac OS X Download</a><br>
<a href="https://www.toontownsfunnyfarm.com/FunnyFarm1.3/funnyfarm_1.3_amd64.deb">Linux Download</a>
</font>
</td>
</tr>
</table>
</td>
<td align=right valign=top>
<table width=125 height=450 border=0 cellpadding=0 cellspacing=0
align=right valign=top>
<tr>
<td valign=center align=center>
<br>
<br>
<br>
<br>
<img src="images/props/tart.png" draggable="false" width="100" />
</td>
</tr>
<tr>
<td align=center>
<img src="images/props/megaphone.png" draggable="false" width="100" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border=0 cellpadding=4 cellspacing=0>
<tr>
<td align=center valign=center>
<font color=#ffffff size="1">
2016, Toontown's Funny Farm
</font>
</td>
</tr>
</table>
</font>
</body>
</html>
CSS
html {
background: url(images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
问题的图像示例
Internet Explorer：here
谷歌浏览器：http://prntscr.com/bq0wa5
奇怪的是，这个问题并没有影响播放按钮，尽管它们几乎完全相同。
任何帮助将不胜感激。此外，任何改善我的网站后端的建议也将受到赞赏。非常感谢。 ：）
答案 0 :(得分：0)
stockList = productList.Select(x => new StockViewModel { Product = x }).ToList()
这样的元素在很久以前就被弃用了，如果不是被淘汰的话。您应该使用CSS进行样式设计。
但是要回答您的问题，您会看到下划线，因为您的代码中的图片与结束链接元素之间有空格<font>
例如：
</a>删除空格，下划线消失：
<a href="about.html"
onMouseOver="imgOn('about_btn')"
onMouseOut="imgOff('about_btn')">
<img border=0 src="images/buttons/about_btn.png" draggable="false" width="105" name="about_btn"/>
</a>