0

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

在 FF 中，它会在页面上产生大约 25 像素高的双色带（表格行）。（我使用了很多垃圾背景颜色只是为了查看存在间隙的位置。而且我知道我可以在所有 css 中获得相同的效果......但是我需要稍后将其他单元格添加到右侧，但我从未能够在 css 中渲染，所以我现在放弃并逃到一个“简单”的表格行。）

该表包含在 class="tabs-block"> 的 div 中。
（这是强制表格为 100% 宽的必要条件。由于某种原因，当放入 id 而不是类时，相同的设置不起作用。不知道为什么。）

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

带的右侧（单元格 2）是 -- 一个蓝色背景的单元格 -- 没有边框 -- 它包含一个文本为 12pt 白色的单个链接

白色（左）蓝（右）细胞在中间相遇，看起来它们之间有 45 度线。

问题：FF 对齐单元格2 底部的链接文本。IE9 将链接文本与单元格2 的空白文本区域对齐，即IE9 将单元格2 文本与单元格1 边框的顶部对齐。不是单元格 2 的底部。这会在单元格 2 = (25px - 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>
4

1 回答 1

0

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

也许不是你想要的那种对齐方式，但它是你最好的选择。不过，有点想知道为什么在同一张桌子上需要不同厚度的边框。简化样式可以解决您的问题。

于 2013-10-26T03:18:22.833 回答