CSS挑戰：輸入去DIV外

我想完成一些具體的平臺約束我所處的東西。CSS挑戰：輸入去DIV外

我創建的問題有點不言自明的jsfiddle在http://jsfiddle.net/MrV5M/4/

的具體問題：

在Chrome，輸入框的右邊框被切斷。
在Safari上，內容類單元格的寬度超過容器，因此溢出邊界。
在IE9中，標籤不浮動的內容DIV

主要的原因我關心Safari瀏覽器的左邊是因爲我工作的一個jQuery Mobile的/ PhoneGap的應用程序，它也是一個網絡應用程序。我只支持現代瀏覽器，但這使我瘋狂。通常，我只是使用表格作爲容器，但內容div上的文本溢出：省略號樣式在表格內不起作用。（基本上，我試圖保持內容爲單行，並且省略號而不強制固定寬度或用Javascript計算寬度）

任何人都可以使用l33t的CSS技能來完成這項工作？我肯定不會...... :)

來源

2012-10-07 Anthony

-1

有很多方法可以做你正在嘗試做的事情，但是如果你堅持使用基本上不被支持的'flex'東西（即使在專業see here中），您需要將供應商前綴添加到flex。

e.g ... -webkit-flex，-moz-flex

另外，我不認爲你需要在具有柔性屬性..不積極，雖然元素被設置寬度。

所以，你的瀏覽器的問題：

-IE不支持在所有彎曲所以你的標籤，不會浮除非你用一個浮點數。

- 你的輸入/內容溢出容器並被切斷的原因實際上與flex無關......但css的工作方式......將元素設置爲100％寬度意味着將其設置爲寬度的父母。但默認情況下，css不會將填充/邊框寬度作爲該寬度的一部分。所以你最終得到100％的寬度加上左/右填充和邊框。但是，既然你只支持現代瀏覽器...... box-sizing:border-box;來救援。谷歌它的細節，但把它放在你的輸入元素應該做的伎倆。

來源

2012-10-07 04:54:55 brains911

大建議腦筋！我會稍微玩一下併發布更新。 – Anthony

嗨腦 - 謝謝你的提示，尤其是盒子大小。我認爲我儘可能地做到了最好。請參閱http://jsfiddle.net/MrV5M/22/ - 適用於IE9，Safari，Chrome和Firefox。（需要一些瀏覽器檢測）再次感謝！ – Anthony

您可能不喜歡這個答覆。我在修正Chrome和IE9問題的CSS中做了一些調整。看看，

http://jsfiddle.net/MrV5M/11/

來源

2012-10-07 05:32:29

這絕對比較接近，但它在Sarfari中不起作用。不過，我真的很欣賞這個嘗試。我會試着玩這些想法，看看有沒有什麼工作。 – Anthony

這個CSS只需添加到您的樣式表，並獲得平和的心態對你的問題：d

* { 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
}

來源

2014-07-31 07:49:01

CSS挑戰：輸入去DIV外

回答

相關問題