html - 我如何更新这些 css 类以在单词的第一个字母后面生成一个蓝色框？

Question

我正在尝试在 Microsoft 共享点门户中自定义标题，并找到了这 4 个 css 类来控制标题设计:

   .ms-WPTitle {font-weight: bold; font-family: verdana, arial, helvetica, sans-serif; color: #003399; padding-left: 6px; padding-right: 7px; padding-top: 2px; padding-bottom: 2px; font-size: 8pt; }
   .ms-WPTitle A:link, .ms-WPTitle A:visited { color:#003399; text-decoration:none; cursor:hand; }
   .ms-WPTitle A:hover { color:red; text-decoration:underline; cursor:hand; }
   .ms-toolbar { font-family: verdana; font-size: .68em; text-decoration: none; color: #003399; }

我需要对上述类进行哪些更新才能使视觉效果符合要求？

这是我试图在 IE 6 和 IE 7 中解决的问题第一个字母周围的蓝色方 block 在 IE 中不起作用。我使用的 css 是:

<style>
      .FirstLetter:first-letter{font-family: arial; font-size: 14pt; font-weight: bold;color:White; background:Blue; border:1px black solid; padding-top:8px; padding-left:8px; padding-bottom:3px;}
      .Spaced{letter-spacing: 5px;font-family: arial; font-size: 14pt; font-weight: bold;}
      </style>

<div class="FirstLetter Spaced headerFont">
Executive Summary
</div>

Answer 1

为了修复第一个字母顶部和底部错误的padding 量，我通过实验发现您应该只增加 IE6/7 的量。

要使其在 IE6 中完全显示，您必须像这样放置一个空格:

.FirstLetter:first-letter{

为此:

.FirstLetter:first-letter {

I shit you not.

因此，据我所知，完整的代码使它在任何地方看起来都是正确的:

Live Demo ( see code )

CSS:

.FirstLetter:first-letter {font-family: arial; font-size: 14pt; font-weight: bold;color:White; background:Blue; border:1px black solid; padding-top:8px; padding-left:8px; padding-bottom:3px;}
                       /*^ important space!*/
.Spaced{letter-spacing: 5px;font-family: arial; font-size: 14pt; font-weight: bold;}

HTML:

<div class="FirstLetter Spaced headerFont">
Executive Summary
</div>

IE <8 的额外 CSS:

<!--[if lt IE 8]>
<style>
.FirstLetter:first-letter {padding-top:12px; padding-bottom:7px}
</style>
<![endif]-->