除非输入文本，否则不会显示跨度的宽度和高度答案

【问题标题】：width and height for a span does not show up unless a text is entered除非输入文本，否则不会显示跨度的宽度和高度
【发布时间】：2011-03-17 20:25:40
【问题描述】：

我有一个<span id="some"></span>，css 是

#some{
      background-color:#000; width:150px; height:50px; 
}

除非输入内容，否则不会显示宽度和高度。我该如何解决这个问题？

【问题讨论】：

标签： css html

【解决方案1】：

span 是一个内联元素，所以如果不告诉浏览器它的display 属性为block，你所做的事情不会成功。

简而言之：

#some{
  background-color:#000; 
  width:150px; 
  height:50px; 
  display: block;
}

希望对你有帮助，思南

【讨论】：

你能解释一下为什么它出现在一个块中以及为什么一个 div 采用没有块的样式吗？
@Jean - <div> 默认为display: block; :)

【解决方案2】：

你不能给内联元素一个高度/宽度，它的大小取决于它的内容，但你可以像这样给它display: inline-block;：

#some{
  background-color:#000; width:150px; height:50px; display: inline-block;
}

See an example here，请注意，IE7 在某些情况下尤其无法处理此问题，因此 display: block; 将在那里工作（但老实说，为什么不直接使用 <div> 呢？）...但请记住inline-block 在流程中，而 block 将所有内容都排在一行。

【讨论】：

@Sinan 为什么这是个坏习惯？
@Sinan - 因为古老的浏览器不支持某些东西并不意味着它是一个坏习惯，它只是意味着你需要了解你的观众。
@Sinan 它不仅被 Firefox 2.x 支持，所以这是一个好习惯！甚至 IE6 也支持它:)
@Nick 我也时常使用它，但它的缺点多于优点。这只是一个没有解释的警告，对不起我的错。但它甚至在 IE7 上也表现不同。如果你也称它为古老的，我和你在一起:) 见：drp.ly/1oaf22
@Sinan - <span> 自然是inline :) 如果您看到的只是屏幕截图，这里是原始页面：quirksmode.org/css/display.html 怪癖模式是处理此类事情的好工具.

【解决方案3】：

通过将位置值设置为绝对值，即使不将显示设置为块，也可以使跨度宽度和高度工作。

.green-box{
      background-color:gold; 
      position:absolute;
      width:300px;
      height:100px;
      border: 2px solid silver;
}

查看此链接了解更多信息：= https://jsfiddle.net/vipingoyal1000/oa2ssb19/

【讨论】：

【解决方案4】：

一个常见的解决方案是使用在跨度标签中。（我假设你也想成为display:block;？）

【讨论】：

【解决方案5】：

由于其他人都提到 span 是内联元素，您要么需要将其设为块元素（使用 display:block），要么在其位置使用块元素（div）。为了更好地理解 inline 和 block 元素，以及整个 html/css 渲染模型，我建议你阅读http://www.w3.org/TR/CSS2/visuren.html。

【讨论】：

【解决方案6】：

使用显示：块；它会完美运行。

谢谢雷克斯

【讨论】：