在Opera，FF和Chrome中的絕對定位元素看起來相同

我有一個顯示textarea和close塊的小模板。在Opera，FF和Chrome中的絕對定位元素看起來相同

我使用Chrome開發，但在其他瀏覽器中看起來不同。 該關閉按鈕更改其在FF和Opera中的位置。

<div class="video-box"> 
    <textarea id="id_video" rows="10" cols="40" name="video" placeholder="Embed your video here." class="has-  placeholder" style="display: inline-block;"></textarea> 
    <div class="close" style="display: block;">close</div> 
</div>

CSS：

.video-box { 
    position: absolute; 
margin-top: 25px; 
} 

textarea { 
    width: 256px; 
    border: 1px solid #C7C6C6; 
    height: 100px; 
    resize: none; 
} 
.close { 
    position: absolute; 
    font-family: Arial, Verdana, sans-serif; 
    top: 94px; 
    left: 222px; 
    z-index: 10; 
    font-size: 8px; 
    cursor: pointer; 
    background: white; 
    border: 1px solid #808080; 
    padding-top: 1px; 
    padding-left: 1px; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
}

什麼會導致這個問題？

http://jsfiddle.net/3hTH2/

來源

2014-07-01 Feanor

給出的差異也許一些截圖。如果是細微的差異，請考慮這種方法：http://dowebsitesneedtolookexactlythesameineverybrowser.com/ –

將視頻盒類的位置更改爲相對位置，然後您可以將位置設爲絕對位置，並且它應該位於所有瀏覽器中的相同位置 – johnyTee

@Feanor，我們的答覆是否回答你的問題？謝謝！ – jtheletter

所有這些瀏覽器有不同的HTML渲染引擎，所以一些小的改動是不可避免的。在每個瀏覽器中看起來幾乎不可能完全相同;我甚至不會嘗試。從右側和底部，而不是

來源

2014-07-01 07:49:49 BFWebAdmin

嘗試定位：

.close { 
    position: absolute; 
    right: 0; 
    bottom: 4px; 
    /* etc. */ 
}

來源

2014-07-01 07:52:59 jtheletter

一些事情來改變。

首先設置font-size：0;上。視頻框，因爲它是可在元件後加入內聯塊多餘的空白：

.video-box { 
    position: absolute; 
    margin-top: 25px; 
    font-size: 0; 
}

接下來，設置餘量：0;上文本區來重置由瀏覽器添加到該元素的默認餘量：

textarea { 
    width: 256px; 
    border: 1px solid #C7C6C6; 
    height: 100px; 
    resize: none; 
    margin: 0; 
}

最後，使用底部：0;和右：0;在.close而不是頂部和左側，因爲這將確保該按鈕被放置在容器的底部右側，不管它是什麼尺寸：

.close { 
    position: absolute; 
    font-family: Arial, Verdana, sans-serif; 
    bottom: 0; 
    right: 0; 
    z-index: 10; 
    font-size: 8px; 
    cursor: pointer; 
    background: white; 
    border: 1px solid #808080; 
    padding-top: 1px; 
    padding-left: 1px; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
}

http://jsfiddle.net/FVP6T/

來源

2014-07-01 08:05:38

你很近，但是你的解決方案沒有正確顯示/放置.close按鈕。檢查我的解決方案 – hex494D49

按鈕未正確顯示的方式是什麼？我檢查了Opera，FF，Chrome和IE中的小提琴，它看起來很好，並且放置在同一個地方。 –

Firefox（v30）顯示低於外框的'.close'按鈕1px。尤其是在使用小字號時它看起來很醜。這很奇怪，我知道。無論如何，爲'font-size：0 tip' +1 +1 – hex494D49

隱藏霍布斯的解決方案是/是最接近但它仍然可能被Firefox正確對待 - 至少在我的情況下，因爲我發現它將.close按鈕放置在1px以下。

因此請檢查此解決方案。至少另一個:)我將.close按鈕的字體大小更改爲30px，以便更好地查看差異。

@-moz-document url-prefix() { 
    .close { 
     margin-bottom: 1px !important; /* !important may be omitted */ 
    } 
} 

.video-box { 
    position: absolute; 
    margin-top: 25px; 
    font-size: 0px; 
} 

textarea { 
    width: 256px; 
    border: 1px solid #C7C6C6; 
    height: 100px; 
    resize: none; 
} 

.close { 
    position: absolute; 
    font-family: Arial, Verdana, sans-serif; 
    bottom: 0px; 
    right: 0px; 
    z-index: 10; 
    font-size: 30px; 
    cursor: pointer; 
    background: white; 
    border: 1px solid #808080; 
    padding-top: 1px; 
    padding-left: 1px; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
} 

.close:hover { 
    background: grey; 
}

檢查工作fiddle

來源

2014-07-01 08:32:39 hex494D49

在Opera，FF和Chrome中的絕對定位元素看起來相同

回答

相關問題