1

我的网站标题中的图片有一个奇怪的问题。在下面的代码中，当点击项目链接时，RSS 提要链接中的图像会跳转到项目链接的位置。AFAIK，这只发生在 IE 中（我目前使用的是 v10.0）

<header id="primary">
   <a href="http://bensouthgate.com"> ben's stuff </a>&nbsp;&nbsp;&nbsp;
   <a href="../posts.php"> posts </a> &nbsp;&nbsp;&nbsp;
   <a href="../projects.php"> projects </a>&nbsp;&nbsp;&nbsp;
   <a href= "../about.php" > about </a>&nbsp;&nbsp;&nbsp;
   <a href="../feed.xml"> <img src="../i/RSS-icon.gif" height="30px" width="30px" style="border:none;"> </a>
   <link rel="shortcut icon" href="http://bensouthgate.com/favicon.ico" />
</header>

我是 CSS 和 HTML 的新手，所以我确信这是一个简单的问题 - 但我不知道从哪里开始寻找。

提前致谢！

编辑：

这是我的样式表（在所有美丽的无知中）：

/* 
Stylesheet for bensouthgate.com
Written 07/21/13
*/

/*************************
  Fonts
*************************/

/* Element Selectors */
html, body
{
    margin: 0;
    padding: 0;
    height: 100%;
    color:#5e5f5c;
}

body
{
    background: #fff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;

}



header#primary
{
    float:left;
    color: #ffffff;
    text-indent:15%;
    top:0;
    line-height:2;
    font-size:30;
    background-color: #33798d;
    width: 100%;
    height: 60px;
    z-index:10;
}


/* ID Selectors */
header#primary a {
  color:white;
  display:inline-block; 
  float:left; 
  padding-right:5px

}

header#primary a:hover a:visited {
  color:#92948e;
}


h3 {
  margin-top:50px;
}

h4 {
  text-align: center;
}

code {
  font-size:16;
}

pre code {
  margin-top:-10px;
  font-size:14;
}



a {color:#33798d;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:active{text-decoration:none;}
a:hover { 
  color:#439eb8;
}

sup { 
  vertical-align: top; 
  font-size: 0.6em; 
}

svg { 
  margin-left:auto; 
  margin-right:auto; 
  display:block;
}

ul {
  list-style-type: square;
}


#wrapper {
    min-height:100%;
    position:relative;
}


#logo
{
  color:white;
  background-color:#92948e;
  width:100%;
  padding-top:60px;
  text-indent:18%;
  height: 35px;
  line-height: 1.7;
  font-size: 20;
  display:block;
}

/* Post Content Formatting */
#main
{
    float: left;
    padding-left: 15%;
    padding-right:15%;
    padding-bottom:80px;
}



/* Class Selectors */
.footer
{
    font-size: 12;
    padding-top:5px;
}

.bottom-space {
    margin-bottom: 30px;
}

/* Float Clearing Group Classes */
.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  zoom: 1;
}
4

2 回答 2

2

你的代码中有一些错误。这里有一些小技巧：

  1. <link rel="shortcut icon" href="http://bensouthgate.com/favicon.ico" />属于<head>您的 html 文档的区域。

  2. 不要用于&nbsp;在元素之间创建空间。改用边距。

  3. 要创建像您这样的导航，我们喜欢 CSS 人员通常使用无序列表 ( ul)。我向您展示了一个包含您的数据的示例：

请注意，我已删除您float: left;以使其正常工作。

HTML：

<head>
    <!-- what else you've got in your head-area -->
    <link rel="shortcut icon" href="http://bensouthgate.com/favicon.ico" />
</head>
<body>
    <ul class="navigation">
        <li><a href="#">ben's stuff</a></li>
        <li><a href="#">posts</a></li>
        <li><a href="#">projects</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#"><img src="RSS-icon.gif" alt="RSS" /></a></li>
    </ul>
    <!-- the rest of your code -->
</body>

CSS：

.navigation {
    list-style: none; /* removes the list bullets from ul */
    padding: 0; /* removes standard padding from ul */
}

.navigation li {
    display: inline-block; /* makes your menu items display horizontally */
    margin-right: 30px; /* creates space between your menu items */
}

您需要#再次用您的路径替换。

于 2013-10-22T15:35:36.013 回答
0

删除 header#primary 中的 float:left 和 #logo 中的 padding-top 可消除 IE10 中的图像移动并正确呈现徽标。在单击标题之前似乎与页面没有区别。

于 2013-10-22T15:39:31.947 回答