html - 如何摆脱 Firefox 添加到 div 的 1px 宽度？

Question

我目前正在构建我的投资组合网站。

我正在处理的页面可以在这里找到:http://www.infomaticfilms.com/jack/jrimg/g_and_d.htm .

它远未完成，因为在解决此问题之前我不想继续前进。此页面将是所有不同元素页面的通用页面，这意味着它们都将具有不同的高度。我不想为每个元素制作单独的页面，我只想制作一个我可以通过每次删除内容并重新保存页面来用于所有人的页面。如果您单击“我”或“联系人”链接，您可以在其他页面上看到边框。我读了一篇来自 Stack Overflow 的文章，它帮助我非常接近解决方案。我在使用 Firefox 时遇到问题，它在右手边增加了 1 个像素。这是 HTML:

<div class="contentAndBorders">   
 <div class="borderLeft"></div>   
 <div class="mainContentProjectPage">
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>
 <p>Content goes here</p>   
</div>   
<div class="borderRight"></div> 
</div>

我希望将内容放入类为 mainContentProjectPage 的 div 中。我需要具有 borderLeft 和 borderRight 类的 div 以随着 mainContentProjectPage 的高度扩展，因此边框看起来是连续的，这就是他们目前所做的。它基本上是三列。第一列和第三列是左右两边的白色边框，中间一列是内容。这是 CSS:

.contentAndBorders {
      width: 950px;
      position: relative;
      overflow: hidden;
}
.mainContentProjectPage {
      float: left;
      background-color: #F55816;
      width: 100%;
      padding-left: 24px;
}
.borderLeft {
      float: left;
      background-color: #FFF;
      width: 1.3%;
      background-attachment: scroll;
      background-image: none;
      background-repeat: repeat;
      background-position: 0px 0px;
      position: absolute;
      left: 0px;
      height: 100%;
      margin: 0;
}
.borderRight {
      background-attachment: scroll;
      background-color: #FFF;
      background-image: none;
      background-repeat: repeat;
      background-position: 0px 0px;
      width: 1.3%;
      float: left;
      position: absolute;
      right: 0px;
      height: 100%;
      margin: 0;
}

我真的不明白它是如何工作的，只是它确实如此。如果有人知道实现相同结果的更好方法，那么我将非常感激，因为这是我网站的最后一部分。我的问题是有谁知道如何去掉 Firefox 右边框上的额外 1 像素？它在 Safari 和 Chrome 中看起来很完美。任何帮助和建议都可以挽救生命。

JSFiddle of code above

Answer 1

摆脱所有与边框相关的额外代码(即，从标记和 css 中删除 borderLeft 和 borderRight div)，只需将以下 css 应用到您的 projectPageWrapper div。

#projectPageWrapper { 
  border: 10px solid white;
  border-radius: 10px;
  -webkit-border-radius: 10px;
}