-2

我指定 2 种字体具有不同的颜色。一种字体被包裹在一个名为的元素周围<d>，它们被包裹在一个<div>类周围。字体在 firefox 上完美显示，但在 IE 9 或更早版本中，浏览器显示它们相同的颜色，因为旧版本浏览器不识别调用的元素<d>，如果我把它放在<div>. 它会打破一条线。如何使 2 种字体具有不同的颜色在 IE 上一起工作

在此处输入图像描述

我的 CSS

.b{float:left;background-color: #EEF2FB; 
   width: 230px;
  font-size: 20px; 
  font-family: CordiaUPC;
  color: #72757A;}

d{font-size: 20px; 
  font-family: CordiaUPC;
  color: #010203;
  margin-left: 5px;}

我的 HTML

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <link rel="stylesheet" href="float.css">

  <div class="b"> Hello<d>Distance</d> </div>
4

3 回答 3

2

使用<span>标签来执行此操作，它将保持以内联方式显示的内容。使用span的原因是，默认情况下<span>会给出一个display: inline属性，而其他一些元素，例如 a是浏览器默认div给出的。display:block

  <div class="b"> Hello<span>Distance</span></div>

更新样式：

.b{
  float:left;
  background-color: #EEF2FB; 
  width: 230px;
  font-size: 20px; 
  font-family: CordiaUPC;
  color: #72757A;
}

span{
  font-size: 20px; 
  font-family: CordiaUPC;
  color: #010203;
  margin-left: 5px;
}
于 2013-05-07T01:44:25.413 回答
2

不要使用<d>甚至不存在的 a ，而是使用 a <span>：

<div class="b"> Hello<span>Distance</span> </div>

与divs 不同，spansdisplay: inline默认设置为。divs 是display: block。

我确实建议您添加一个id，span因为您可能不希望所有跨度都像这样。

这会给你这个HTML：

<div class="b"> Hello<span id="mySpan">Distance</span> </div>

然后你的 CSS 将是：

.b{
  float:left;
  background-color: #EEF2FB; 
  width: 230px;
  font-size: 20px; 
  font-family: CordiaUPC;
  color: #72757A;
}

#mySpan{
  font-size: 20px; 
  font-family: CordiaUPC;
  color: #010203;
  margin-left: 5px;
}
于 2013-05-07T01:44:39.860 回答
1

如前所述，您可以使用<span>代替<d>，或者如果您愿意，您甚至可以使用<b>：

<div class="b"> Hello<b>Distance</b> </div>

b {
  font-size: 20px; 
  font-family: CordiaUPC;
  color: #010203;
  margin-left: 5px;
  font-weight: normal;
}
于 2013-05-07T01:47:58.767 回答