CSS挑战：输入超出DIV

我正试图围绕我所处的平台约束完成一些特定的工作

我在网站上创建了一个有点不言自明的JSFidle

具体问题是：

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

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

---

有人拥有l33t CSS技能来实现这一点吗？我当然不……：）

有很多方法可以完成您想要做的事情，但是如果您坚持使用基本上不受支持的“flex”东西（即使在专业中），您需要在

flex

中添加供应商前缀

e、 g.

-webkit-flex

，

-moz-flex

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

因此，您的浏览器存在以下问题：

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

---

-输入/内容溢出容器并被切断的原因与flex无关。。但是css的工作方式。。将元素设置为100%宽度意味着将其设置为其父元素的宽度。但是默认情况下，css不会将填充/边框宽度计算为该宽度的一部分。所以你最终得到了100%的宽度加上L/R填充和边框。但是，由于您只支持现代浏览器<代码>框大小：边框框去营救。谷歌搜索它的详细信息，但是把它放在你的输入元素上就可以了

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

---

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

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

---

这肯定更接近了，尽管在萨法里不起作用。不过，我真的很感谢你的尝试。我将尝试运用这些想法中的一个，看看是否有任何效果……非常好的建议！我会玩一玩，然后发布一个更新。嗨，大脑-谢谢你的提示，特别是盒子大小。我想我让它尽可能地发挥作用了。请参阅-适用于IE9、Safari、Chrome和Firefox。（需要一点浏览器检测）再次感谢！