Question

在此处查看精简版：https://jsfiddle.net/dkmsuhL3/

<html xmlns="http://www.w3.org/1999/xhtml">

<title>Bootstrap Bug Test</title>
<!-- Bootstrap V4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <img class="img-fluid" src="http://via.placeholder.com/1000x1000" />                    
            </div>
            <div class="col-sm-6">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fermentum felis sit amet augue luctus, at dignissim purus tristique. Etiam elit eros, varius ac tincidunt at, condimentum at felis. Integer eget ullamcorper ligula, ut finibus quam. Nunc tempor, enim id ultricies fringilla, ante risus venenatis ipsum, in euismod purus quam imperdiet libero. Ut diam lacus, tincidunt egestas tristique at, blandit quis est. Aenean bibendum sagittis ligula, sit amet mollis nisi iaculis at. Aenean blandit, mauris ac fermentum malesuada, massa arcu scelerisque arcu, quis molestie diam purus ut dolor.</p>
                <p>Praesent egestas placerat dui, ac mollis dolor. In hac habitasse platea dictumst. Morbi sapien risus, consequat id tincidunt quis, lobortis a tortor. Morbi hendrerit tristique tempor. Vestibulum ultrices mauris magna, ac auctor lectus iaculis a. Aenean porta, nisi sit amet pellentesque fermentum, nibh ante molestie neque, non dictum ante justo sit amet dolor. Nunc scelerisque fringilla elit vitae tincidunt. Vivamus nec ex at enim aliquam tristique a in ipsum. Etiam bibendum mauris id scelerisque consequat. Donec nec orci leo. Nam ultricies condimentum porta. Mauris nunc nunc, ultricies in consequat sit amet, tristique ac lacus.</p>
            </div>
        </div>
    </div>

我相信我的语法正确但是两个col-sm-6列在Safari（5.1.7）上没有水平放置

Answer 1

这不是错误，因为Bootstrap 4不支持您引用的Safari版本（5.1.7，Windows）

https://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#desktop-browsers

事实上，对于那个版本的Safari的支持在2012年到期，就在Apple停止为Windows操作系统开发Safari并拉动Safari 6.0的时候。

Answer 2

Bootstrap不支持Safari 5.1.7。

该浏览器版本不完全支持flexbox（仅使用-webkit前缀），并且它不支持包装。您可以尝试使用更大的Autoprefixer范围自行编译，该范围将添加-webkit-前缀，或者通过指定自己添加它们。

.row {
  display: -webkit-flex; 
}

除非出现其他实施错误，否则它可能会起作用。但是，由于flex: wrap不受支持，您必须每行使用一行。

P.S。除非您的产品有很大比例的受众仍然因某种原因使用该浏览器，否则只需不用担心它就有意义。我怀疑用法将接近0。

Answer 3

我通过互联网搜索找到了解决方案。

Bootstrap 4正在使用flexbox属性。但是，当我检查:before和:after伪CSS元素时，值为table。

因此请将其替换为flexbox

 .clearfix:before,
 .clearfix:after, 
 .dl-horizontal dd:before, 
 .dl-horizontal dd:after, 
 .container:before, 
 .container:after, 
 .container-fluid:before, 
 .container-fluid:after, 
 .row:before, 
 .row:after{
      display: flex
 }

Bootstrap 4 Safari Bug

3 个答案: