html - 使用不同大小的边框对齐相邻表格单元格中的文本？

Question

我需要以下代码的帮助，这些代码在 Foxfire 中完美运行，而且——令人惊讶的是——在 IE9 中运行得非常糟糕。

在 FF 中，它会在页面上产生一个大约 25 像素高的双色带(表格行)。(我使用了很多垃圾背景颜色只是为了看看哪里存在差距。而且我知道我可以在所有 css 中获得相同的效果......但是还有其他单元格我需要稍后添加到右边，我从来没有能够在 css 中呈现，所以我暂时放弃并逃到一个“简单”的表格行。)

表格包含在一个带有 class="tabs-block"> 的 div 中。
(这是强制表格 100% 宽所必需的。出于某种原因，当放入 id 而不是类时，相同的设置将不起作用。不知道为什么。)

行的左半部分(单元格 1)是-- 空单元格(无内容，字体大小设置为 0px)-- 它底部有一个 25px 的白色边框，右侧有 25px 的蓝色边框(顶部或左侧都没有)-- 它有一个白色背景的橙色，不应该被看到，因为没有任何内容，如果有的话，它的高度将为 0pt。在 FF 中它不显示。在 IE9 中它会显示出来顶部是几个像素宽。 (希望我可以附上屏幕截图，但我太新了。)

乐队的右侧(Cell 2)是-- 一个蓝色背景的单元格-- 没有边界-- 并且它包含一个文本为 12pt 白色的链接

白色(左)蓝色(右)细胞在中间相遇，看起来它们之间有一条 45 度 Angular 的线。

问题:FF 将链接文本对齐到单元格 2 的底部。IE9 将链接文本与单元格 2 的空白文本区域对齐，即 IE9 将单元格 2 文本与单元格 1 边框的顶部对齐。不是 Cell 2 的底部。这会在 Cell 2 = (25px minus 12pt) 高处留下空白间隙。

经过太多天的彻底失败，我的眼睛已经交叉，欢迎帮助。

.tabs-block > table {
   background-color: white;
   text-align: right;
   width: 100%;}

table#tabs-table {
      border-collapse:collapse;
      width:100%;}

tr#tabs-row-1 {
  padding: 0px;
  margin:0px;
  border-spacing: 0px;
  background-color:red;}

<div class="tabs-block" style='background-color: green;'>
  <table cellspacing = '0px'
         cellpadding = '0px'  
         id='tabs-table;'>
     <tr id='tabs-row-1'>          
       <td style='width:50%;
                  margin:0px;
                  padding:0px;
                  background-color: orange;
                  border-style: solid;
                  border-color: #000066 #000066 #FFFFFF red;
                  border-width: 0px 25px 25px 0px;'
                  class='text-blue-0'></td>            
       <td style='width:1px; 
                  margin:0px;
                  padding:0px;
                  border:0px;
                  background-color: #000066;
                  white-space:nowrap;'
                  class='title-white-12'>                         
         <a href='contact.jsp'  class='title-white-10'
            style='vertical-align:bottom;
               height:100%;
               background-color: #000066; 
               padding:0px;
               margin:0px; 
               border:0px;'>
           Contact Us
         </a>
      </td>     
    </tr>
  </table>
</div>

Answer 1

刚读到这里，我的眼睛就眯起来了。假设您的内容是表格数据，并且我不允许您使用表格来布局网站，那么要实现具有不同边框的任何类型的垂直对齐的唯一方法是使用 vertical-align:中间.

也许不是您想要的对齐方式，但这是您的最佳选择。不过，有点想知道为什么您需要在同一张 table 上使用不同厚度的边框。简化您的样式可以解决您的问题。