Question

我正在使用基于smart table angular js的模块。我在我的项目中实现了这个模块，并意识到它在Safari上没有正确渲染。然后我浏览了智能表站点上给出的示例，并意识到给出的示例示例在safar上也存在问题。以下是具有固定表格标题代码示例的plunker。

http://plnkr.co/edit/fcdXKE?p=preview

HTML标记

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="angular.js@1.2.25" data-semver="1.2.25" src="https://code.angularjs.org/1.2.25/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src=smart-table.debug.js></script>
  </head>

  <body ng-controller="mainCtrl">
    <table st-table="displayed" class="table table-striped">
    <thead>
    <tr>
        <th st-ratio="20" st-sort="firstName">first name</th>
        <th st-ratio="20" st-sort="lastName">last name</th>
        <th st-ratio="10" st-sort="age">age</th>
        <th st-ratio="30" st-sort="email">email</th>
        <th st-ratio="20" st-sort="balance">balance</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="row in displayed">
        <td st-ratio="20">{{row.firstName}}</td>
        <td st-ratio="20">{{row.lastName | uppercase}}</td>
        <td st-ratio="10">{{row.age}}</td>
        <td st-ratio="30">{{row.email}}</td>
        <td st-ratio="20">{{row.balance | currency}}</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="5" class="text-center">
            <div  st-items-by-page="20" st-pagination=""></div>
        </td>
    </tr>
    </tfoot>
</table>

  </body>

</html>

的script.js

angular.module('myApp', ['smart-table'])
    .controller('mainCtrl', ['$scope', function ($scope) {

        var
            nameList = ['Pierre', 'Pol', 'Jacques', 'Robert', 'Elisa'],
            familyName = ['Dupont', 'Germain', 'Delcourt', 'bjip', 'Menez'];

        function createRandomItem() {
            var
                firstName = nameList[Math.floor(Math.random() * 4)],
                lastName = familyName[Math.floor(Math.random() * 4)],
                age = Math.floor(Math.random() * 100),
                email = firstName + lastName + '@whatever.com',
                balance = Math.random() * 3000;

            return{
                firstName: firstName,
                lastName: lastName,
                age: age,
                email: email,
                balance: balance
            };
        }


        $scope.displayed = [];
        for (var j = 0; j < 50; j++) {
            $scope.displayed.push(createRandomItem());
        }
    }])
    .directive('stRatio',function(){
        return {
          link:function(scope, element, attr){
            var ratio=+(attr.stRatio);

            element.css('width',ratio+'%');

          }
        };
    });

的style.css

table {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 500px; /* this can vary */
}

table * {
    box-sizing: inherit;
    -moz-box-sizing: inherit;
}

thead {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

tbody {
    overflow-y: scroll;
    display: inline-block;
}

thead > tr, tbody > tr, tfoot > tr {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

thead, tfoot {
    flex-shrink: 0;
}

th, tbody td {
    width: 20%; /* this can vary */
    overflow-x: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

tfoot {
    display: inline-block;
}

tfoot td {
    width: 100%;
    display: inline-block;
}

你会在safari上看到，表页标题在页面滚动时没有固定;但是同样适用于其他浏览器。请帮忙。

Answer 1

今天早上我遇到了同样的问题。和我一样，我使用的是智能表网页中的示例代码。

问题是css中的flex属性与Safari不兼容。为了更好的跨浏览器兼容性：

把它代替display：flex（必须按此顺序）：

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

将此代替flex-direction：row（与列相同）：

-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;

把它放在flex-wrap：nowrap：

-moz-flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;

最后这不是flex-shrink：0：

-moz-flex-shrink: 0;
-webkit-flex-shrink: 0;
flex-shrink: 0;

我可以在Safari 8中测试它，但它应该适用于Safari 6+（如果有人能证实这一点，我会感激不尽。）

有关flexbox的更多信息，我建议您A complete guide to flexbox。要获得跨浏览器兼容性，请转到here。

智能表angularjs模块固定表头不适用于safari

1 个答案: