0
现在，我正在将这个网站的问题放在一起。我有一些按钮，采用部分透明PNG图像文件的形式，在徘徊时更改为另一种形式的按钮，并在隐藏时再次返回。出于某种原因，图像旁边会显示一个下划线的微缩链接，它无意间将所述图像略微推向左侧。但是，这不会发生在Internet Explorer上，而是发生在Google Chrome和Mozilla Firefox上。我已经尝试过使用CSS方法去除图像中的下划线，并且它可以工作，但图像仍然继续向左轻微移动，并且它会误导我的OCD。有没有办法来解决这个问题？这里是我的代码...HTML + 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中：http://prntscr.com/bq0wa5
谷歌浏览器：http://prntscr.com/bq0wk8
奇怪的是，这个问题不会尽管他们是几乎相同的代码影响的播放按钮。
任何帮助，将不胜感激。此外，任何改善我的网站后端的建议也将不胜感激。非常感谢。 :)
你可以在你的按钮上添加文字修饰：无，你看到的是浏览器默认为所有超链接加下划线。 – will