Question

问题在于，出于某种原因，在IE 9（非兼容模式）中，其中一个tds会导致愚蠢的对齐。在这个小提琴http://jsfiddle.net/2x3k3y5e/1/中，左侧按钮很好，它是右侧按钮的第一个。由于某种原因，它不会设置在右侧。这是用户控件（按钮栏）的一部分，它将为页面创建各种按钮。仅在IE 9中我们注意到了这个问题。我想在任何地方修复它，并希望为此使用一些css。

<table style="margin-top:10px;" cellspacing="0" cellPadding="0">
<tbody>
    <tr>
        <td noWrap="nowrap">&nbsp;&nbsp;</td>
        <td style="width: 100%;">
            <input style="width: 125px;" id="BottomButtonBar_btnDelete" class="btnEntry"  name="m$c$PatientSearchUC$PanelSearch$PanelSearch_BBB$BottomButtonBar_btnDelete" value="Previous Criteria" type="button"/>
        </td>
        <td style="padding-left: 4px;">
            <input style="font-weight: normal; " id="BottomButtonBar_btnUpdate" class="btnEntry"  value="Clear" type="button"/>
        </td>
        <td style="padding-left: 4px;">
            <input style="width: 65px; font-weight: bold;" id="BottomButtonBar_btnUpdateAndReturn" class="btnPrimary btnEntry" value="Search" type="submit"/>
        </td>
    </tr>
</tbody>
</table>

CSS：

    .btnEntry, .btnNav, .btnPrimary, .btnDefault{
  text-transform: none;
  cursor: pointer;  
  padding-right: 0;
  padding: 6px 12px;
  margin-left:0;
  margin-right:0; 
  color: #000000;
  min-width:60px;
  }

.btnNav {
  background-color: #fff;
  border: #ccc 1px solid;
}

.btnEntry {
  background-color: #ccc;
  /*border: #b2b2b2 1px solid;*/
   border: #ababab 1px solid;
    color: #404040;  
    min-width:60px;
}
.btnDefault {
    background-color: #ccc;
    border: #ababab 1px solid;
    color: #404040;
}
.btnPrimary {
  color: #ffffff;
  background-color: #82a83d;
}

如果我设置它的大小很好，但我不认为使用jquery将按钮大小重置为相同大小是一个很好的解决方案。我再次希望有一些css技巧，我不知道要解决这个问题。感谢。

备注：我使用IETester或Windows和IE 9的VM

Answer 1

试试Float：对：

HTML：

<table style="margin-top:10px;" cellspacing="0" cellPadding="0">
    <tbody>
        <tr>
            <td noWrap="nowrap">&nbsp;&nbsp;</td>
            <td style="width: 100%;">
                <input style="width: 125px;" id="BottomButtonBar_btnDelete" class="btnEntry"  name="m$c$PatientSearchUC$PanelSearch$PanelSearch_BBB$BottomButtonBar_btnDelete" value="Previous Criteria" type="button"/>
            </td>
            <td style="padding-left: 4px;">
                <input style="font-weight: normal; " id="BottomButtonBar_btnUpdate" class="btnEntry btnClear"  value="Clear" type="button"/>
            </td>
            <td style="padding-left: 4px;">
                <input style="width: 65px; font-weight: bold;" id="BottomButtonBar_btnUpdateAndReturn" class="btnPrimary btnEntry" value="Search" type="submit"/>
            </td>
        </tr>
    </tbody>
</table>

CSS：

.btnEntry, .btnNav, .btnPrimary, .btnDefault{
  text-transform: none;
  cursor: pointer;  
  padding-right: 0;
  padding: 6px 12px;
  margin-left:0;
  margin-right:0; 
  color: #000000;
  min-width:60px;
  }
.btnClear{
    float:right;
}
.btnNav {
  background-color: #fff;
  border: #ccc 1px solid;
}
.btnEntry {
  background-color: #ccc;
  /*border: #b2b2b2 1px solid;*/
   border: #ababab 1px solid;
    color: #404040;  
    min-width:60px;
}
.btnDefault {
    background-color: #ccc;
    border: #ababab 1px solid;
    color: #404040;
}
.btnPrimary {
  color: #ffffff;
  background-color: #82a83d;
}

IE 9表间距问题

1 个答案: