CSS：Text over Text - IE8问题

Question

我的图像上印有统计文字。这适用于FF，Chrome和IE9，但不适用于IE8。我似乎无法弄清楚这里有什么问题。

HTML：

                    <div>
                    <div class="image">

                      <img src="@Url.Content("~/stuff/stuffImage.png")" alt="" />

                      <GIR1><span>@ViewBag.stuffArray[4]%</span></GIR1>

                    </div>
                    </div>

CSS：

.image {
   position: relative;
   width: 100%; /* for IE 6 */
}

GIR1 {
   position: absolute;
   top: 110px;
   left: 50px;
   width: 100%;

}

GIR1 span{
   color: white;
   font: bold 15px/15px Helvetica, Sans-Serif;
   letter-spacing: -1px;
   padding: 10px;

}

而不是将文本放在图片中。它像普通文本一样将它们放在它之外。什么可能导致这里的问题？

Answer 1

我有理由相信您使用自定义元素<GIR1>。

低于版本9的IE本身并不识别未知元素。

您可以切换到<div class="GIR1">（这里可以轻松选择），或者：

您必须使用JavaScript修补程序：http://code.google.com/p/html5shiv/

请注意，您必须自己将自定义元素添加到脚本中。

有关未压缩的版本，请参阅：http://www.iecss.com/print-protector/

var elems = 'abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video'

您需要将自定义元素添加到该列表中。