Question

我需要帮助以下代码在Foxfire中完美运行，并且 - 惊喜 - 在IE9中非常好。

在FF中，它在页面上产生一个大约25px高的双色带（表格行）。（我使用了很多垃圾背景颜色，只是为了看看存在的差距。我知道我可以在所有的css中获得相同的效果......但是我需要在其后添加其他单元格，以后我才能够为了在css中渲染，所以我现在放弃并逃到一个“简单”的表格行。）

该表包含在div中，其中class =“tabs-block”＆gt;。
（这是迫使表格100％宽的必要条件。出于某种原因，当放入id而不是类时，相同的设置将无效。不知道为什么。）

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

乐队的右侧（单元格2）是 - 具有蓝色背景的单元格 - 没有边界 - 它包含一个文本为12pt white的链接

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

问题： FF对齐单元格BOTTOM处的链接文本。 IE9将链接文本与单元格2的空文本区域对齐，即IE9将单元格2文本与单元格1的边框TOP对齐。不是Cell 2的底部。这会在Cell 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>

Answer 1

我的眼睛只是看着这个。假设您的内容是表格数据，并且我不允许您使用表格来布局网站，那么您将使用vertical-align: middle来实现任何类型的垂直对齐并使用不同边框的唯一方法。 / p>

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

将相邻表格单元格中的文本与不同大小的边框对齐？

1 个答案: