Chrome和Firefox CSS边界问题

嗨，我的边框在Firefox和Chrome中出现了这个问题。它在狩猎中看起来不错

小提琴/现场演示：

Chrome和Firefox中的那个看起来有些参差不齐。
在这里：

我的CSS：

#whatsnew {
  margin-top: 50px;
  border: 1px solid #D9D9D9;
  border-right: 50px solid #d52b1e;
  padding: 35px;
  -webkit-font-smoothing: antialiased;
      font-smoothing: antialiased;
  font-family: Verdana;
  padding-top: 20px;
  padding-bottom: 15px;
}

---

有人知道我如何解决这个问题吗？

试试：

-webkit backface visibility:hidden

或

-webkit变换样式：preserve-3d

或在

背面可见性

的基础上添加一些填充物，这实际上是通过设计实现的-边框在拐角处呈对角连接，因此您看到的是右边框的边缘逐渐变细，以与其他1px边缘相交

我能想到的最好的解决方案是使用包装器div，对其应用1px边框，然后将红色边框保留在内部div中：

HTML:

（又快又脏的黑客…）

如果要避免包装右侧的灰色边框，也可以将其更改为红色：

    border-right-color: #d52b1e;

。。。如果你想变得真正聪明，你可以使用

位置：相对
和负边距将内部div“拉”到边框上方，这样灰色就会消失在红色后面：

你是否有一个指向现场演示的链接，或者一个可能制作@Martyn0627的链接嘿，我没有现场演示，但我在帖子中有它的截图@Martyn0627哦，我创建了一个小提琴仍然没有帮助：（任何人都可以帮我吗？这是一个相当大的项目..需要它看起来整洁！！太棒了！！它工作了！！非常感谢！！这个论坛太棒了谢谢！！
#wrapper {
border: 1px solid #D9D9D9;
margin-top: 50px;
-webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
font-family: Verdana;
}
#whatsnew {
border-right: 50px solid #d52b1e;
padding: 35px;
padding-top: 20px;
padding-bottom: 15px;
}

    border-right-color: #d52b1e;