相對定位內聯元素的負邊距有時在IE7中剪輯字符

我在頁面上有兩個不同的上下文中有<a>元素，有些是在div中（稱它們爲.container> a），有些位於子div（如.container> .section> a），甚至還有一些在後續的div中（比如.container> ...> .section> a）。我目前做了一些格式上的直列<a>元素與下面的CSS：相對定位內聯元素的負邊距有時在IE7中剪輯字符

line-height:1.4; 
position: relative; 
left: 15px; 
margin-left: -5px;

由於我目前造型的聯繫與border-bottom: 1px dotted #333，這是必要的環節留行內元素。問題是有時.section中的鏈接與.container中的鏈接有所不同。後者在FF 3.6和IE7中都很好看。前者的第一個字符左右（不管在負邊界的數量內）在IE7中被切斷（我假設爲負邊界）。

我認爲這可能是一個hasLayout的錯誤，所以我檢查了三種情況的狀態。它們如下：

案例1）.container> a，.container hasLayout爲真。（http://imgur.com/WJ3zM.png）
情況2）.container> .section> a，.section hasLayout爲false，.container hasLayout爲true。（http://imgur.com/4NHxj.png）
情況3）.container> ...> .section> a，.section hasLayout爲false，除了其中一個插入容器（div，li和ul）hasLayout爲true，並且.container hasLayout是真的。（http://imgur.com/WefBk.png）

前兩種情況在IE7中看起來不錯，第三種情況下有負餘量錯誤。有什麼可能導致這種情況發生，並且在這種有限的情況下？

來源

2010-07-16 burningstar4

它可能是hasLayout。您是否嘗試在案例3中添加布局至.container？（對不起，你說已經有了佈局，我說的是.section之一...）

添加基於我的評論及以下實驗：

更改您的a標記您的margin-left: -5px到text-indent: -5px。

來源

2010-07-16 15:15:03 ScottS

對於案例2，我給了.section div佈局（在IE Developer Toolbar中使用縮放：1），並且實際上使bug在這種情況下也會出現。當我在案例3中給出.section佈局時，它沒有解決問題。 – burningstar4 2010-07-16 16:50:41

好吧，如果沒有別的，它確認'hasLayout'是你的問題。沒有代碼，我不可能進行調試。我不確定你爲什麼要這樣做，但爲什麼不設置'left：10px'並消除-5px的邊距（如果負邊距是導致錯誤的原因）？ – ScottS 2010-07-16 16:59:56

因爲它隻影響第一行，所以頁邊距用於創建鏈接第二行的縮進（如果換行）。我將努力獲得一些精簡的代碼供您查看。 – burningstar4 2010-07-16 20:45:52

明確設置z-index以覆蓋兄弟或您可能需要在該相對定位元素的父元素上設置一個位置。 IE錯誤地將z索引0應用於所有元素。它也可能是溢出：隱藏。

圖像不如現場示例。

來源

2010-07-16 15:13:44

我不確定你對z-index的意思，你能澄清一下嗎？我試圖在.section div上設置position: relative不起作用。我也嘗試給予。部分overflow: visible，而且什麼都沒做。對不起，圖像不理想，我會看看我能做些什麼，但在這種情況下，它是相當複雜的。案例3中的「> ...>」實際上是2個div，然後是ul和它的子li，然後是另一個div。 – burningstar4 2010-07-16 17:01:27

'z-index：5;'..你可以做一個演示嗎？ – 2010-07-16 17:09:20

一個非常完整的演示在這裏：http：//www.webdevout.net/test？03V – burningstar4 2010-07-16 21:02:03

相對定位內聯元素的負邊距有時在IE7中剪輯字符

回答

相關問題