Question

我有一张桌子，这是Chrome上的截图： enter image description here 这是Firefox上显示的相同表格（在IE上完全相同）在底部的按钮上有一个额外的像素（仅在一些resoslutions上），我不明白为什么这只发生在chrome但是是的。所有的css都在下面的代码选择中。

 <style>
      @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700);
      @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700);
      @import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700);
      button > .fa
      {
        margin:0;
        margin-right:5px;
      }
      button:hover
      {
        background-color:#3C8DBC;
        color:#ffffff;
      }
      button
      {
        width:100px;
        text-align:center;
        padding:0;
        background-color:#F9F9F9;
        margin:5px;
        border-radius:8px;
        border:1px solid #3C8DBC;
        color:#3C8DBC;
        font-size:16px;
        margin-left:0;
        font-family:'Source Sans Pro';
      }
      body
      {
        margin:0;
        background-color:#F9F9F9;
      }
      ul
      {
        font-size:0;
        margin:0;
        padding:0;
        float:left;
        width:12%;
        height: 100%;
        background-color:#F4F4F4;
        border-right:1px solid #EFEFEF;
      }
      .fa
      {
        margin-left:10px;
        margin-right:10px;
      }
      li
      {
        border-top:1px solid #FFFFFF;
        border-bottom:1px solid #DBDBDB;
        font-weight:300;
        font-size:16px;
        width:100%;
        float:left;
        background-color:#F4F4F4;
        height:40px;
        line-height:40px;
        color:#222222;
        font-family:roboto;
      }
      li:hover
      {
        background-color:#F9F9F9;
      }
      .topbar > span
      {
        font-family:24px;
        line-height:50px;
        color: #fff;
        font-size:24px;
        font-family:'Source Sans Pro';
        margin-left:20px;
      }
      .topbar
      {
        bottom-border:2px solid #000000;
        width:100%;
        background-color:#3C8DBC;
        height:50px;
        float:left;
      }
      .list1
      {
        font-size:0;
        margin:0;
      }
      .list1 > li
      {
        background-color:red;
        text-align:center;
        font-size:16px;
        display:inline-block;
        width:25%;
      }
      span:nth-of-type(2)
      {
        margin-right:20px;
        float:right;
        font-size:20px;
      }
      .title > h1
      {
        font-size:32px;
        height:auto;
        width:auto;
        margin:0;
      }
      table
      {
        border-collapse:collapse;
        display:inline-block;
        width:100%;
      }

      .contents
      {
        border-spacing:0px;
        display:inline-block;

        width:60%;
        height:auto;
        font-family:'Open Sans';
      }
      .fa
      {
        font-size:14px;
      }
      a > .fa
      {
        font-size:13px;
        margin-left:2px;
      }
      td > a > button:hover
      {
        border-color:gray;
        background-color:gray;
      }
      td > a > button
      {
        margin:3px;
        width:110px;
        margin:0;
        border-radius:0;
        border-color:gray;
        color:gray;
      }
      h2
      {
        border-top:1px solid #DFDFDF;
        margin:0;
        font-size:16px;
        font-weight:500;
        font-family:'Open Sans';
        padding:0;
        padding-bottom:5px;
        padding-top:5px;
        width:100%;
        text-align:center;
      }

      .bottom
      {
        display:inline-block;
        color:black;
        margin:0;
        width:100%;
        padding:0;
        border:0;
        border-radius:0;
        margin-bottom:30px;
        border-color:#DFDFDF;
        padding-bottom:5px;
        padding-top:5px;
        border-top:0;
      }
      .bottom:hover
      {
        color:black;
        -webkit-transition:background-color 2s;
        background-color:#DFDFDF;
      }
    </style>



    <div class="topbar">
      <span>
        Admin Panel
      </span>
      <span>
        Logged in as {user}
      </span>
    </div>

    <ul class="mainbar">
      <a href="#">
        <li>
          <i class="fa fa-home">
          </i>
          Home
        </li>
      </a>
      <a href="#">
        <li>
          <i class="fa fa-file">
          </i>
          Pages
        </li>
      </a>
      <a href="#">
        <li>
          <i class="fa fa-database">
          </i>
          Items
        </li>
      </a>
      <a href="#">
        <li>
          <i class="fa fa-envelope-o">
          </i>
          Quote Requests
        </li>
      </a>
      <a href="#">
        <li>
          <i class="fa fa-money">
          </i>
          Sales
        </li>
      </a>
    </ul>
    <div class="contents">
      <div class="title">
        <h1>
          Editing page :
        </h1>

      </div>
      Page Style ID : 
      Category ID :
      <br>
      <h2>
        Page Category Sizes
      </h2>
      <table class="1">
        <tbody>
          <tr>
            <td>
              ID
            </td>
            <td>
              Text
            </td>
            <td>
              Edit
            </td>
          </tr>
          <tr>
            <td>
              1
            </td>
            <td>
              1
            </td>
            <td>
              <a href="#">
                <button class="">
                  Edit
                </button>
              </a>
            </td>
          </tr>
        </tbody>
      </table>
      <button type="submit" class="bottom">
        <i class="fa fa-plus">
        </i>
        Add
      </button>
      <br>
      <h2>
        Page Category Industries
      </h2>
      <table>
        <tr>
          <td>
            ID
          </td>
          <td>
            Text
          </td>
          <td>
            Edit
          </td>
        </tr>
        <tr class="1">
          <td>
            1
          </td>
          <td>
            1
          </td>
          <td>
            <a href="#">
              <button class="">
                Edit
              </button>
            </a>
          </td>
        </tr>
      </table>
      <button type="submit" class="bottom">
        <i class="fa fa-plus">
        </i>
        Add
      </button>
      <br>
      Page Content:
      <table>
        <tr>
          <td>
            ID
          </td>
          <td>
            Image URL
          </td>
          <td>
            Image Text
          </td>
        </tr>
        <tr>
          <td>
            1
          </td>
          <td>
            1
          </td>
          <td>
            1
          </td>
        </tr>
      </table>
      <button type="submit" class="bottom">
        <i class="fa fa-plus">
        </i>
        Add
      </button>
    </div>
    </div>

Answer 1

我在Chrome上遇到了同样的问题。我通过删除font-family“Open Sans”解决了这个问题。

铬的宽度错误

1 个答案: