如何在邊框放置H1的同時放置顯示：inline？

我有一個<h1>標題出現在一個框中（我的意思是一個屏幕上的可見框，如border:solid 3px white）。盒子本身以及裏面的文字都需要有影子。該框不能是固定的寬度，因爲框內的文字在頁面之間變化。

問題出在這裏：除了在IE9中，陰影只出現在盒子上，而不是文字，我的工作很完美。

如果我從CSS中刪除display:inline，那麼它可以在IE9中正常工作，但是盒子是整個容器的寬度，而不是繞在文本上。所以我認爲這個解決方案的關鍵是找到一個更好的方法來將文本和容器放在容器中，所以display:inline;可以被刪除。

標記是非常簡單的：

<style> 
.container { 
    width:500px;height:200px;padding:50px;background:#eee; 
    text-align:center; 
} 

h1 { 
    font-size:34px; 
    color:white; 
    padding:25px; 
    border:solid 3px white; 
    letter-spacing:7px; 
    display:inline; 

    box-shadow: 0 0 6px #666; 
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8); 
    filter:glow(color=black, strength=1); /* IE9 stupid proprietary shadow */ 
} 
</style> 

<div class='container'> 
    <h1>Testing</h1> 
</div>

你還可以用它在這裏玩：http://jsfiddle.net/j434X/4/

謝謝。

來源

2013-08-03 Eric

我在h1中添加了margin屬性。這樣可以擺脫display: inline;，並且仍然可以得到相同的結果，但更長的文本會跳到另一行。有點像如果你有一個固定的寬度，我知道你不想要的。 Here's the fiddle無論如何，如果它有幫助

來源

2013-08-03 02:46:53 samrap

感謝 - 但不幸的是，每個設計師，文本必須看起來就像原來的例子，與文本框25px（因此h1的25px填充）。這看起來不錯，但工作，但我不能有設定的寬度。你知道一個把所有東西放在中間而不使用設定寬度的技巧嗎？ – Eric

不幸的是，我沒有。我試着設置'width：inherit;'甚至製作一個新的div來包含h1並將盒子陰影和邊框傳遞給它，但仍然無法工作。這是一個艱難的問題，我投了這個問題，所以希望你能找到一些比我更有經驗的人。 IE瀏覽器有時候是一個糟糕的拍攝。祝你好運 – samrap

感謝您的嘗試:-)我同意，我不能相信我們一直到IE9，它仍然*屁股巨大的痛苦！ – Eric

如何在邊框放置H1的同時放置顯示：inline？

回答

相關問題