box-shadow vs display：inline-block vs display：inline - 有趣的行爲

我剛碰到一個有趣的問題。我有3個div放置在一起，顯示：inline-block，寬度爲32％。他們都有一個按鈕，裏面有盒子陰影設置。box-shadow vs display：inline-block vs display：inline - 有趣的行爲

輸出：

http://imgur.com/a/3HWyp

正如你可以在第一張圖片看到有1號和3號按鈕的陰影，但陰影的方向從第二個按鈕的不同。

我已經檢查了調試器中的所有內容，它們具有相同的盒子陰影設置。

如果我將inline-block更改爲僅用於測試的內聯（第二張圖片），則陰影進入相同（右）方向，但是 - 當然 - 寬度存在問題。

我需要把3個按鈕放在一起。

請幫忙:)

在此先感謝！

來源

2015-11-12 err

你可以把演示放在http://jsfiddle.net上，或者使用stackoverflow上的代碼片段編輯器嗎？我們需要查看代碼才能更好地幫助您。 –

感謝您的提示。我已經從零開始重建了一切，並得到了解決方案。（編輯：貼有回車鍵，對不起，我是這裏noobie :)）所以的jsfiddle是在這裏： https://jsfiddle.net/bt4jvr8k/ 的問題是「同事3「div的」溢出：隱藏「。同樣的問題是按鈕的「overflow：hidden」，但它只是從兩側收集陰影。 – err

我知道了：

的jsfiddle：jsfiddle.net/bt4jvr8k

的問題是「COL-3」 div的「溢出：隱藏」。

幾乎與按鈕的「overflow：hidden」相同的問題，但它只是從兩側收穫陰影，而div的作物也從底部收穫。

來源

2015-11-13 21:18:21 err

box-shadow vs display：inline-block vs display：inline - 有趣的行爲

回答

相關問題