更改跨度的文本左側移動父元素

如果有人能夠立即將我指引到正確的位置，我表示歉意，但我不確定甚至要搜索此特定問題。這似乎是一個Chrome特定的錯誤，但我不確定如何解決它。更改跨度的文本左側移動父元素

發生了什麼事情是，當我替換範圍內的文本時，它將（大）父錨移動到左邊。（請參閱演示小提琴：http://jsfiddle.net/Sj3Gj/2/）我簡化了HTML，但由於各種原因，這是我需要的結構/ CSS。如果你把float：留在anchor元素上，它可以很好地工作，但是我有更大的這個結構，這個額外的float會破壞更大結構的位置。

我在這裏完全損失。如果你看着鉻合金的小提琴，錨點就會浮起來，但在Firefox/IE中，它很好。有任何想法嗎？

這裏是我的代碼：

<a class="trigger"> 
    <div></div> 
    <span>Some text</span> 
</a> 

a.trigger { 
    width: 337px; 
    height: 16px; 
    padding: 2px 20px 2px 5px; 
    margin-top: 3px; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 
a.trigger, a.trigger:link, a.trigger:visited { 
    display: inline-block; 
    border: 1px solid; 
    border-top-color: #BFD6F1; 
    border-left-color: #BFD6F1; 
    border-bottom-color: #9EBCE1; 
    border-right-color: #9EBCE1; 
    padding: 2px 18px 2px 7px; 
    background-color: #FFF; 
    text-decoration: none; 
    cursor: pointer; 
} 

div{ 
    background-image: url('http://placekitten.com/200/300'); 
    height: 16px; 
    width: 16px; 
    display: inline-block; 
    float: left; 
} 
a.trigger span { 
    margin-left: 10px; 
} 
a.trigger, a.trigger:link, a.trigger:visited { 
    cursor: pointer; 
}

來源

2013-08-06 Zach Weiler

這是sbecause你是浮動的DIV左側。去除浮動，不需要它，你已經宣佈inline-block

DEMO http://jsfiddle.net/kevinPHPkevin/Sj3Gj/5/

div{ 
    background-image: url('http://placekitten.com/200/300'); 
    height: 16px; 
    width: 16px; 
    display: inline-block; 
}

來源

2013-08-06 20:29:22 Vector

我想我不得不放棄在這個問題上。出於某種原因，當我刪除浮動時，它會將文本撞到下一行（在我的實際項目中），但我無法在小提琴中重新創建它。所以......顯然我正在製作一些東西。感謝您的幫助。 –

你有一個錨標籤包裹了一個div標籤。這隻在'html5'中生效。在此之前，你無法在div上包裝錨點。確保你在'html'文檔中設置了正確的'doctype'，否則會導致不同的瀏覽器出現奇怪的行爲。 – Vector

更改跨度的文本左側移動父元素

回答

相關問題