html - IE更改中的文本对齐

Question

body {
  text-align: left;
  color: #000810;
}
.settings-edit-table {
  width: 100%;
  margin: 15px 0 15px;
}
.settings-edit-table th,
.settings-edit-table td {
  padding: 0 0 8px;
  vertical-align: top;
  line-height: 29px;
}
.settings-edit-table th {
  width: 110px;
  padding-right: 10px;
}
.settings-edit-table input {
  width: 388px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  color: #808080;
  font: inherit;
  line-height: 17px;
  padding: 5px 10px;
}

<table class="settings-edit-table">
  <tbody>
    <tr>
      <th scope="row">Name</th>
      <td>
        <input name="firstName" id="firstName" value="test" type="text">
      </td>
    </tr>

    <tr>
      <th scope="row">Surname</th>
      <td>
        <input name="lastName" id="lastName" value="test" type="text">
      </td>
    </tr>



    <tr>
      <th scope="row">Phone</th>
      <td>
        <input name="phone" id="phone" value="6666666" type="text">
      </td>
    </tr>

    <tr>
      <th scope="row">E-mail</th>
      <td>
        <input name="email" id="email" value="test@gmail.com" type="email">
      </td>
    </tr>


  </tbody>
</table>

对于行名称，文本对齐是左对齐的，在 Chrome 和 Firefox 中一切正常。由于某些原因，在 Internet Explorer 中文本对齐居中。有什么建议可以解决这个问题吗？这里也是 fiddle link

Answer 1

添加此属性

.settings-edit-table th{text-align:left}