Question

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

 <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>标签就在他们的机器人下面

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

如果这意味着任何Chrome开发者工具在其中一个上显示<a>而在另一个上显示{{1}}，这就产生了差异。如果有一个更愉快的方式来制作图片链接请告诉我btw。

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

编辑：这是一个怪异的doctype :(

再也不会了。浪费了这么多时间。谢谢大家[=

Answer 1

这是因为你只能有一个同名的id。考虑将它们更改为类，或使用css选择器（如

）将其更改为不同的名称

#sidebar1, #sidebar2{

}

Answer 2

您已关闭了img标记，而您正尝试使用</img>再次关闭它，另一个标记是您有两个div's {{1 }} 这是错误的。

尝试提供 same id 或向他们添加 unique id's 示

class

Answer 3

如果DOM id不相同，它们会相同。

试

<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;
 }

Answer 4

重复其他人所说的......使用class而不是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{}

Answer 5

/*CSS*/
.sidebar {
      position: fixed;
      display: block;
      top: 20%;
      width: 5px;
      right: 100px;
 }

<!-- HTML -->

<div class="sidebar"> <!-- replace both "id" with "class" like this -->

相同的css，相同的div，看起来不同

5 个答案: