Safari剪切按钮的文本

Question

在safari浏览器上我遇到了这个问题：

我试过overflow: visible;但它没有帮助，我在这个按钮上使用bootstrap css类：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header>
     <div class="container-fluid">
        <table>
            <tr>
                <td class="float-left">
                    <a href="#"> <img class="img-responsive brand" />
                    </a>
                </td>
                <td class="col-md-2">
                    <br>
                    <br>
                    <br>
                    <div class="btn-group">
                        <div class="row">
                            <button type="button" class="btn btn-link col-xs-6"><span class="glyphicon glyphicon-log-out"></span> LOG OUT</button>
                            <button type="button" class="btn btn-link col-xs-6"><span class="glyphicon glyphicon-dashboard"></span> Return To Dashboard</button>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</header>

Answer 1

问题在于您的容器不足以容纳按钮。您有两种选择：

更改button班级

目前您正在使用col-xs-6，每列的宽度为50％。然而，您可以在第一列中找到第二列的空间。请参阅下面的代码段。

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header>
     <div class="container-fluid">
        <table>
            <tr>
                <td class="float-left">
                    <a href="#"> <img class="img-responsive brand" />
                    </a>
                </td>
                <td class="col-md-2">
                    <br>
                    <br>
                    <br>
                    <div class="btn-group">
                        <div class="row">
                            <button type="button" class="btn btn-link col-xs-4"><span class="glyphicon glyphicon-log-out"></span> LOG OUT</button>
                            <button type="button" class="btn btn-link col-xs-8"><span class="glyphicon glyphicon-dashboard"></span> Return To Dashboard</button>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</header>

＆＃13;

＆＃13;

＆＃13;

将table宽度更改为100％

正如Awadhesh所提到的，你应该使table元素的宽度达到100％。尽管如此可能应避免使用表格进行布局。

＆＃13;

＆＃13;

table { width: 100% }

＆＃13;

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <header>
         <div class="container-fluid">
            <table>
                <tr>
                    <td class="float-left">
                        <a href="#"> <img class="img-responsive brand" />
                        </a>
                    </td>
                    <td class="col-md-2">
                        <br>
                        <br>
                        <br>
                        <div class="btn-group">
                            <div class="row">
                                <button type="button" class="btn btn-link col-xs-6"><span class="glyphicon glyphicon-log-out"></span> LOG OUT</button>
                                <button type="button" class="btn btn-link col-xs-6"><span class="glyphicon glyphicon-dashboard"></span> Return To Dashboard</button>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </header>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试html：

<div class="container-fluid">
      <table style="width: 100%;">
        <tbody>
          <tr>
            <td class="float-left"><a href="#"> <img class="img-responsive brand"> </a></td>
            <td><br>
              <br>
              <br>
              <div class="btn-group">
                <div class="row">
                  <div class="col-xs-6">
                    <button type="button" class="btn btn-link"><span class="glyphicon glyphicon-log-out"></span> LOG OUT</button>
                  </div>
                  <div class="col-xs-6">
                    <button type="button" class="btn btn-link"><span class="glyphicon glyphicon-dashboard"></span> Return To Dashboard</button>
                  </div>
                </div>
              </div></td>
          </tr>
        </tbody>
      </table>
    </div>

Answer 3

一些事情：

1. 摆脱你的桌子。 Bootstrap为您做布局，因此不需要它们。

2. 请勿将<br>用于间距。使用填充或边距

3. 将col-xs-6更改为col-md-6

以下HTML有效：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header>
     <div class="container-fluid">

                <a href="#"> <img class="img-responsive brand" />
                </a>

                <div class="btn-group">
                    <div class="row">
                        <button type="button" class="btn btn-link col-md-6"><span class="glyphicon glyphicon-log-out"></span> LOG OUT</button>
                        <button type="button" class="btn btn-link col-md-6"><span class="glyphicon glyphicon-dashboard"></span> Return To Dashboard</button>
                    </div>
                </div>

     </div>
</header>

此处有一个实例：https://jsfiddle.net/fescjgwm/2/