引导程序 4 Safari 错误答案

【问题标题】：Bootstrap 4 Safari Bug引导程序 4 Safari 错误
【发布时间】：2018-04-14 21:54:03
【问题描述】：

<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) 上水平不合适

【问题讨论】：

如果这确实是一个错误，我建议您在 Github repo 中提出问题
谢谢，完成：github.com/twbs/bootstrap/issues/24647
修复了 safari 中的所有 bootstrap 4 问题：stackoverflow.com/a/65234112/7186739

标签： javascript html css twitter-bootstrap safari

【解决方案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 的时候。

【讨论】：

【解决方案2】：

Bootstrap 不支持 Safari 5.1.7。

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

.row {
  display: -webkit-flex; 
}

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

附：除非您的产品有很大比例的受众由于某种原因仍在使用该浏览器，否则不必担心它是有意义的。我怀疑使用量会接近 0。

【讨论】：

【解决方案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
 }

【讨论】：