在 IE 上具有最小宽度的内联跨度答案

【问题标题】：Inline span with min-width on IE在 IE 上具有最小宽度的内联跨度
【发布时间】：2012-03-05 16:48:17
【问题描述】：

嗨
我有 3 个 SPAN 必须是 inline 和一个 min-width。
显然在 IE 上，SPAN 不能有 min-width。我尝试使用DIV，但是当我把它放在inline 时，min-width 被忽略了。

CSS

span {
    display: inline;
    min-width: 150px;
}

HTML

<span>1</span>
<span>2</span>
<span>3</span>

【问题讨论】：

【解决方案1】：

inline 元素不能采用width、height、vertical margin 和padding。所以你必须定义display:inline-block;这样写：

span {
    display: inline-block;
    *display: inline;/* for IE7*/
    *zoom:1;/* for IE7*/
    min-width: 150px;
}

“宽度”属性不适用。 'margin-left' 或 'margin-right' 的计算值 'auto' 变为使用值 '0'。

【讨论】：

【解决方案2】：

你可以使用填充。
由于您使元素内联，因此没有必要指定最小宽度。

【讨论】：

span 中有文字在 ajax 中添加。所有文本的大小都不相同，所以我想要一个最小重量。大多数情况下，文本会比跨度小，显示也会相同，但有些情况下，文本可能会更长。
好吧..那么我想你需要使用 float:left;将显示属性设置为“阻止”，稍后再清除浮动。
该死的 IE 吃掉了所有开发人员的时间..！
+1 用于填充的想法，它帮助我解决了一个内容可编辑的问题，否则点击区域为零。

【解决方案3】：

根据我对sandeep's answer的回答，您可以使用

span {
    display: inline-block;
    *display: inline;
    *zoom:1;
    width: auto !important;
    width 150px;
    min-width: 150px;
}

它应该可以工作。看看这个 jsfiddle：http://jsfiddle.net/ramsesoriginal/yCvhB/2/

Internet Explorer 在最小宽度和高度方面存在一些问题，但同时在!important 方面也存在问题，因此利用这一点（以及没有指定溢出每个 with 是 IE 的最小宽度的事实）我们可以有什么工作。

【讨论】：