Firefox的絕對定位問題與旋轉變換

我試圖用CSS做一些漂亮的，靈活的箭頭按鈕只使用旋轉。問題在於Firefox似乎將箭頭部分與所有其他瀏覽器略有不同。添加Firefox唯一樣式當然可以解決這個問題，但有沒有更優雅的方式？Firefox的絕對定位問題與旋轉變換

HTML如下

<span class="arrow-box left">Previous button</span>&nbsp;&nbsp; 
<span class="arrow-box right">Next button</span>

CSS如下：爲Chrome，IE，Safari瀏覽器

.arrow-box { line-height:34px; border:2px solid #7E95AF; padding:8px 20px; z-index:10; font-family:Arial; font-weight:bold; font-size:12px; border-radius:5px; background-color:#EEE; position:relative; } 
.arrow-box.left { border-left:0; } 
.arrow-box.right { border-right:0; } 

.arrow-box.left::before, 
.arrow-box.right::after { content:""; display:block; width:24px; height:24px; transform:rotate(45deg); -webkit-transform:rotate(45deg); z-index:-1; position:absolute; border-style:solid; border-color:#7E95AF; border-radius:5px; background-color:#EEE; } 
.arrow-box.left::before { top:2px; left:-10px; border-width:0 0 2px 2px; } 
.arrow-box.right::after { top:2px; right:-10px; border-width:2px 2px 0 0; }

工作版本：http://jsfiddle.net/YWnzc/356/

工作版本的Firefox：http://jsfiddle.net/YWnzc/352/

來源

2015-09-24 woodstock

作爲參考，其中包括Firefox的唯一的CSS小提琴是這裏http://jsfiddle.net/YWnzc/358/ – woodstock

是你的border-right width ch當瀏覽器是Firefox的時候，所以我認爲你可以使用JavaScript中的函數來檢測瀏覽器並根據它進行更改。

你可以做這樣的...

的Javascript：

var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+ 

if(isFirefox == true) 
{ 
    $('.arrow-box.right').toggleClass('changed'); 
}

CSS：

.arrow-box.right.changed:after { top:2px; right:-7px; border-width:2px 2px 0 0; }

我稱之爲改變的CSS的.arrow-box.right，你可以做如果您願意，還可以更改爲.arrow-box.left。
入住此琴在Firefox和鉻 - >http://jsfiddle.net/YWnzc/360/

來源

2015-09-24 04:36:47

我敢肯定它會工作，雖然正如後文所述，我試圖在CSS中優雅地做到這一點（更多的純粹問題，而不是我怎麼能做到這一點，因爲我的迴應顯示它可以如何完成）。理想情況下，我想知道根本原因，然後瞭解如何使用不同的技術/風格解決問題。 – woodstock

Firefox的絕對定位問題與旋轉變換

回答

相關問題