0

这两个看起来完全不同，即使它们应该看起来一样

 <div id="sidebar">
      <a href="post.php"><img class="button" src="/media/post.png"/></img></a>
      <a href="logout.php"><img class="button" src="/media/logout.png"></img></a>
 </div>

 <div id="sidebar">
      <input type="image" src="/media/submit.png" name = "submit" class="button" />
      <a href="logout.php"><img src="/media/logout.png" class="button" ></img></a>
      <a href="main.php"><img src="/media/back.png" class="button" ></img></a>
 </div>

他们在所有其他divs/任何其他css之外，</body>标签就在他们的bot下方

#sidebar {
    position: fixed;
    display: block;
    top: 20%;
    width: 5px;
    right: 100px;
}

如果这意味着任何 chrome 开发人员工具<a>在其中一个而不是另一个之间显示出两者之间的差异，那么这就造成了差异。如果有更愉快的方式来制作图片链接，请顺便告诉我。

编辑：我应该补充一点，这是两个不同的页面。

编辑：这是该死的文档类型:(

再也不。浪费了这么多时间。无论如何谢谢大家[=

4

5 回答 5

1

这是因为您只能拥有 1 个具有相同名称的 id。考虑将它们更改为类，或使用 css 选择器的不同名称，例如

#sidebar1, #sidebar2{

}
于 2013-02-21T05:02:36.563 回答
1

你已经关闭了img标签本身，你试图再次关闭它，</img>另一个是你有两个div's是same id错误的。

尝试给它们unique id's或添加一个class，如图所示

<div id="sidebar1" class="sidebar">
      <a href="post.php"><img class="button" src="/media/post.png"></img></a>
      <a href="logout.php"><img class="button" src="/media/logout.png"></img></a>
</div>

<div id="sidebar2" class="sidebar">
  <input type="image" src="/media/submit.png" name = "submit" class="button" />
  <a href="logout.php"><img src="/media/logout.png" class="button" ></img></a>
  <a href="main.php"><img src="/media/back.png" class="button" ></img></a>
</div>
于 2013-02-21T05:03:47.643 回答
0

只是重复其他人所说的话......使用类而不是id。你不需要像那样关闭你的 img 标签。这是一个用于测试目的的 jsFiddle http://jsfiddle.net/cVMdM/1

更新的 html

 <div class="sidebar">
      <a href="post.php"><img class="button" src="/media/post.png"/></a>
      <a href="logout.php"><img class="button" src="/media/logout.png"/></a>
 </div>

 <div class="sidebar">
      <input type="image" src="/media/submit.png" name = "submit" class="button" />
     <a href="logout.php"><img src="/media/logout.png" class="button" /></a>
     <a href="main.php"><img src="/media/back.png" class="button" /></a>
 </div>

更新的 CSS

.sidebar{}
于 2013-02-21T05:14:31.683 回答
0 
/*CSS*/
.sidebar {
      position: fixed;
      display: block;
      top: 20%;
      width: 5px;
      right: 100px;
 }

<!-- HTML -->

<div class="sidebar"> <!-- replace both "id" with "class" like this -->
于 2013-02-21T05:18:53.550 回答
0

如果DOMid 不同，它们看起来会相同。

尝试

<div class="sidebar">
      <a href="post.php"><img class="button" src="/media/post.png"/></img></a>
      <a href="logout.php"><img class="button" src="/media/logout.png"></img></a>
 </div>

 <div class="sidebar">
      <input type="image" src="/media/submit.png" name = "submit" class="button" />
      <a href="logout.php"><img src="/media/logout.png" class="button" ></img></a>
      <a href="main.php"><img src="/media/back.png" class="button" ></img></a>
 </div>

CSS

.sidebar 
 {
      position: fixed;
      display: block;
      top: 20%;
      width: 5px;
      right: 100px;
 }
于 2013-02-21T05:10:20.037 回答