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

我试图在Microsoft share point门户中自定义标题，并找到以下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中解决的问题，第一个字母周围的蓝色方框在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>

.FirstLetter:第一个字母{字体系列：arial；字体大小：14pt；字体大小：粗体；颜色：白色；背景：蓝色；边框：1px黑色实心；顶部填充：8px；左侧填充：8px；底部填充：3px；}
.Spaced{字母间距：5px；字体系列：arial；字体大小：14pt；字体重量：粗体；}
执行摘要

---

我不知道如何将规则仅应用于第一个字母，但您可以尝试将单词拆分，并将第一个字母放在自己的div中：

<div class="css-for-all-letters">
  <div class="css-for-first-letter" style="float:left;">E</div>
  <div class="css-for-the-other-letters" style="float:left;">xecutive Summary</div>
  <div style="clear:both;"></div>
</div>

E
执行摘要

---

不过，老实说，如果必须交换文本（例如在国际化中），这可能会非常烦人。因此，在您尝试此操作之前，我会记住这一点。

要修复第一个字母顶部和底部的

填充量的错误，我通过实验发现您应该增加IE6/7的填充量

要使其在IE6中显示，您必须在其中放置一个空格，如下所示：

.FirstLetter:first-letter{

为此：

.FirstLetter:first-letter {


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

（）

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;}

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

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

HTML:

.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;}

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

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


执行摘要

IE的额外CSS

你说的“不工作”是什么意思？您发布的屏幕截图显示IE7中第一个字母周围有一个蓝色框。你的意思是它看起来和Firefox不一样吗？蓝色框需要在上面扩展10px，在左边扩展10px。这些设置无法应用。看到IE左边的贫血了吗？！？！无论何时浮动div，它都会将其转换为一个内联元素（如span标记）。清除它可以确保float属性不会意外地传递给其他元素（googleie float bug）。我总是浮动一个div而不只是使用span，是因为如果将来出于某种原因，您开始使用js库，有时js libs生成的html会创建一个div，您可能会意外地尝试在span中插入div，这可能会导致渲染问题。如果你确定你永远不会在元素中放入任何东西，除了单词的字母，您可以使用两个span标记而不是像E executive Summary i am lookign这样的三个div标记，以了解我需要向您展示的类添加哪些css命令，从而在IE6do中获得所需的结果，无论哪个对您有效；但我会先调查@thirtydot的答案。这似乎更接近您最初试图实现的目标。回答不错，我以前从未见过js小提琴。很棒的工具。你是人类中的神。现在测试。