Question

我试图在平台约束下完成具体的事情。

创建了一个有点不言自明的问题解决方案

具体问题：

在Chrome上，输入框的右边框被切断。
在Safari上，内容类单元格的宽度超出了容器，因此它会溢出边框。
在IE9上，标签不会浮动到内容div的左侧

我关心Safari的主要原因是因为我正在开发一个JQuery Mobile / PhoneGap应用程序，它也是一个Web应用程序。我只支持现代浏览器，但这让我疯狂。通常我只是使用一个表作为容器，但内容div上的文本溢出：省略号样式在表内时不起作用。（基本上，我试图将内容保留在一行中并使用省略号而不强制使用固定宽度或使用Javascript计算宽度）

任何人都有l33t的CSS技能来完成这项工作吗？我肯定不会......：）

Answer 1

只需将此CSS添加到您的样式表中，就可以放心使用：D

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

Answer 2

你可能不喜欢这个答案。我在css中做了一些调整，修复了Chrome和IE9问题。看看，

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

Answer 3

有很多方法可以做你想要做的事情，但是如果你坚持使用很大程度上不受支持的'flex'东西（即使在专业see here中），你还需要添加供应商前缀为flex。

例如...... -webkit-flex，-moz-flex

另外，我认为您不需要在具有flex属性的元素上设置宽度..但不是正面的。

所以你的浏览器问题：

-IE根本不支持flex，因此除非你使用浮点数，否则你的标签不会浮动。

- 您的输入/内容溢出容器并被切断的原因与flex无关。但css的工作方式..将元素设置为100％宽度意味着将其设置为宽度它的父母。但默认情况下，css不会将padding / border-width计为该宽度的一部分。所以你最终得到100％的宽度加上L / R填充和边框。但是，因为你只支持现代浏览器.. box-sizing:border-box;来救援。谷歌它的细节，但把它放在你的输入元素上应该可以解决问题。

CSS挑战：INPUT超出DIV

3 个答案: