0

我正在尝试围绕我所处的平台限制完成一些特定的事情。

我在http://jsfiddle.net/MrV5M/4/创建了一个有点不言自明的问题的 jsfiddle

具体问题：

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

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

任何人都有 l33t CSS 技能来完成这项工作？我当然不会... :)

4

3 回答 3

1

只需将此 CSS 添加到您的样式表中，就可以放心地处理您的问题：D

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
于 2014-07-31T07:49:01.890 回答
0

你可能不喜欢这个答案。我对修复 Chrome 和 IE9 问题的 css 进行了一些调整。看一看，

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

于 2012-10-07T05:32:29.877 回答
-1

有很多方法可以做你想做的事情，但如果你坚持使用基本上不受支持的“flex”东西（即使在专业中也可以看到这里），你需要将供应商前缀添加到flex.

例如.. -webkit-flex,-moz-flex

另外，我认为您不需要在具有 flex 属性的元素上设置宽度。虽然不是积极的。

所以你的浏览器问题：

-IE 根本不支持 flex，所以你的标签不会浮动，除非你使用浮动。

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

于 2012-10-07T04:54:55.087 回答