CSS邊界左/右不能正確顯示

我把槍稍微跳了一下，它的邊界底部導致了它。

新問題：

您可以從邊框中刪除相框效果嗎？
enter image description here

所以我有一個div這個CSS代碼：

border-left: 5px solid #009933;

它顯示了優良的Safari：
enter image description here

但它顯示像這樣在Firefox和Chrome：
enter image description here

所以我想我的問題是，爲什麼Firefox和Chrome顯示它不同，我怎麼能讓它看起來像Safari顯示它？

謝謝

你能把小提琴的位置 - > http://jsfiddle.net/ – 2014-11-05 12:28:36

你有一個「重置」的CSS表？它可以幫助你「刪除」每個瀏覽器默認的樣式。也許這就是原因。如果你沒有它（我不推薦）嘗試設置至少保證金：0;和填充：0;對你的身體 – 2014-11-05 12:29:06

這將是很難回答，沒有更多的信息（標記和CSS）的相關元素。在FF和Chrome中，右側的元素之間有水平邊框，「D」也有不同的背景色。 – 2014-11-05 12:29:10

不同瀏覽器之間的邊框角落的確切呈現方式不同。

如果邊框很粗，瀏覽器會嘗試在邊框之間創建對角線邊界。就在角落裏的像素可以從邊框的一個獲取顏色：

****************** 
+***************** 
++**************** 
+++*************** 
++++ 
++++ 
++++

或其他邊境：

+***************** 
++**************** 
+++*************** 
++++************** 
++++ 
++++ 
++++

不同的瀏覽器將使用任意這兩種方法，但不同的在所有四個元素的角落。我曾經比較過不同的瀏覽器使用什麼，而且幾乎看起來每個瀏覽器供應商都採取了一種沒有其他瀏覽器使用過的方法。

就你而言，Firefox和Chrome碰巧使用水平邊框顏色作爲左下角的邊界。

爲了讓側邊框走在外面，即：

++++****************** 
++++****************** 
++++****************** 
++++****************** 
++++ 
++++ 
++++ 
++++

你會用一個元素中的另一個，並設置外部元件上的垂直邊框和水平邊框內部零件上。

例（用誇張的邊框寬度，只是爲了顯示效果）：

.outer { border: 10px #0c0; border-style: none solid; } 
 
.inner { border: 10px #ccc; border-style: solid none; }

<div class="outer"><div class="inner">Demo</div></div>

2014-11-05 12:47:30 Guffa

回答