爲什麼Chrome和Safari for iPad 2搞亂了我的CSS三角形？

我想創建一個橫幅效果只使用CSS和沒有圖像。其結果應該是這樣的：爲什麼Chrome和Safari for iPad 2搞亂了我的CSS三角形？

enter image description here

這個例子是使用HTML和CSS創建this jsfiddle。這是一面旗幟（.widget-title）的CSS：

.widget-title 
{ 
    background-color: #B1DDC9; 
    color: white; 
    height: 24px; 
    text-align: center; 
} 

.widget-title:before 
{ 
    content: ""; 
    float:left; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 12px 0px 12px 12px; 
    border-color: #B1DDC9 #B1DDC9 #B1DDC9 white; 
} 

.widget-title:after 
{ 
    content: ""; 
    float:right; 
    width: 0px; 
    height: 0px; 
    border-style: solid; 
    border-width: 12px 12px 12px 0px; 
    border-color: #B1DDC9 white #B1DDC9 white; 
}

這似乎在所有我已經在我的桌面和手機上測試的瀏覽器正常工作。 Safari和Chrome瀏覽器在我的iPad2但是渲染橫幅的左側和右側外緣淡淡的細線：

enter image description here

是什麼原因造成這種現象？有什麼我可以做的解決它？

來源

2013-08-23 TC.

嘗試擦拭你的iPad的屏幕 – MarsOne

僅僅在FYI使用iOS時，所有瀏覽器都使用Safari進行渲染......包括Chrome。所有iOS Web瀏覽器都使用內置的WebKit引擎進行繪製。 – ParrotMac

嘗試在.widget-title的邊框顏色中將白色變爲透明：before和.widget-title：after？ – Daidai

這看起來是背景顏色通過在流血三角形的邊緣，可能是由於某種子像素渲染的怪癖。從你的CSS這不應該發生，因爲三角形應該對標題的邊緣對接，但這是你的CSS;）

不知道它是否適合你，但你可以嘗試把標題上的position:relative和兩個三角形上的position:absolute，並將相關的left:0和right:0放置在您想要的位置。以我的經驗來看，這通常比你的元素最終會在哪裏浮動更可靠。

作爲便箋，您可以使用border-color:transparent作爲您不想顯示的三面。這樣也可以讓三角形變大一個像素，並且左右重疊一個像素（即left:-1px）。這絕對應該排序你的問題。

來源

2013-08-23 10:19:54 SimonR

-1

嘗試改變border-width: 12px 0px 12px 12px; 到border-width: 12px 2px 12px 12px;

也許這將三角形擴展「背」就在旗幟，擺脫線

來源

2013-08-23 10:11:21 SaturnsEye

爲什麼Chrome和Safari for iPad 2搞亂了我的CSS三角形？

回答

相關問題