Question

所以我已经将两个图形作为导航按钮升级到我的网页。与按钮颜色相同的小线显示在下方和两个按钮之间。这是一张显示问题的图片。

这些按钮是在fireworks中创建的，然后我保存了它们并在我的网页中链接到它们。这不是来自其中一个图形的缺陷的线。使用填充扩展图形不会修复它，如下所示：

尝试为边框添加CSS值也不会将其删除，以防由于某种原因它是一小块边框。我知道它不是图形中的缺陷，因为单独的两个图像在单独的网页上不会产生任何线条，遗憾的是由于缺乏声誉（不超过2个链接），我无法在此处发布截图。

所以当他们彼此相邻时，我不知道如何删除这条恼人的线路。现在这只是两个按钮，但它最终会发展成一个完整的网页。这些按钮将充当导航栏，所以我需要它们关闭，这条线就不见了！这些按钮在滚动时具有不透明度增加和减少效果，这是在jQuery中创建的。我在Chrome浏览器中查看了这些按钮以获取屏幕截图，但我没有尝试过其他浏览器，但我需要从所有浏览器中删除此行。以下是我的所有网页代码：

$(document).ready(function(){
	$(".nav_btn").mouseenter(function(){
		$(this).fadeTo(100, 1.0);
	});
	$(".nav_btn").mouseleave(function(){
		$(this).fadeTo(100, 0.75);
	});
});

.nav_btn{
	opacity: 0.75;
}

<!DOCTYPE html>
<html>
	<head>
		<base href="C:/Users/Adasli199/CGC project/"; target="_self">
		<link rel="stylesheet"; type="text/css"; href="code/stylesheet.css"/>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<script type="text/javascript"; src="code/jQuery.js"></script> 
		<link rel="shortcut icon" href="Assets/CGC icon.ico"/>
		<title> CGC | Template </title> 
	</head>
	<body>
		<div id="nav_bar">
			<a href="Pages/Home.html">
				<img class="nav_btn"; id="home_btn"; src="Assets/Home button.png"/>
			</a>
			<a href="Pages/SEO.html">
				<img class="nav_btn"; id="SEO_btn"; src="Assets/SEO button.png"/>
			</a>
		</div> 
	</body>
</html>

如果有人能提供帮助，我会非常感激！谢谢！

Answer 1

它的默认锚下划线你可以修复＆＃39;通过从导航栏链接中删除text-decoration

＆＃13;

#nav_bar > a {
  text-decoration: none;
}

＆＃13;

<div id="nav_bar">
    <a href="Pages/Home.html">
      <img class="nav_btn" id="home_btn" src="Assets/Home button.png" />
    </a>
    <a href="Pages/SEO.html">
      <img class="nav_btn" id="SEO_btn" src="Assets/SEO button.png" />
    </a>
  </div>

＆＃13;

您也不需要使用分号来分隔img属性

Answer 2

将font-size: 0添加到您的CSS规则中。问题是您的a标记期望存在某种文本，并且它们不会保存在图像标记周围的空白处。因此，它有助于为您的空白添加下划线。你显然不希望这样，但你去了。

或者，您可以删除a代码与img代码之间的所有空格，但font-size:0将保存您的代码可读性。

某些颜色的小线显示在锚标签中的图像下方

2 个答案: