Question

在Safari和其他一些基于iOS的浏览器中查看时，第一行的最后一列被包装到下一行。

Safari浏览器：

Chrome /其他：

代码：

＆＃13;

.flexthis {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexthis .col-md-4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

＆＃13;

<div class="row flexthis">
  <div class="col-md-4 col-sm-6 text-center">
    <div class="product">
      <img src="img.jpg" alt="" class="img-responsive">
      <h3>Name</h3>
      <p>Description</p>
    </div>
  </div>
</div>

＆＃13;

Answer 1

<强>解释

这是因为Safari将伪元素之前和之后视为真实元素。例如。想想一个有7件物品的容器。如果容器具有：before和：之后Safari会定位这样的项目：

[:before ] [1st-item] [2nd-item]

[3rd-item] [4th-item] [5th-item]

[6th-item] [7th-item] [:after  ]

<强>解决方案

作为已接受答案的替代方案，我删除：之前＆amp; ：来自flex容器而不是改变HTML。在你的情况下：

.flexthis.container:before,
.flexthis.container:after,
.flexthis.row:before,
.flexthis.row:after {
   content: normal; // IE doesn't support `initial`
}

Answer 2

只是为了更新我的问题

这是我使用的解决方案，对于与Flexbox兼容的Bootstrap4来说，这显然是固定的。所以这只适用于bootstrap3。

.row.flexthis:after, .row.flexthis:before{
  display: none;
}

Answer 3

我知道这个问题已经很老了，但我今天遇到了这个问题，浪费了12个多小时来修复它。尽管大约花了10个小时才意识到safari正在以12列自举网格失败，但这不是其他问题。

我做的修复很简单。这是Visual Composer的版本。其他框架的类名可能有所不同。

.vc_row-flex:before, .vc_row-flex:after{
  width: 0;
}

Answer 4

我不想添加更多类来修复这种bug，所以，你也可以自己修复.row类。

    let encryptedPaymentData = payment.token.paymentData
    let paymentMethod = payment.token.paymentMethod
    let txId = payment.token.transactionIdentifier
    print("paymentMethod = \(paymentMethod)")
    print("txId = \(txId)")
    let decryptedPaymentData:NSString! = NSString(data: encryptedPaymentData, encoding: NSUTF8StringEncoding)
    print("decryptedPaymentData = \(decryptedPaymentData)")

Answer 5

发现此问题尝试使用Bootstrap为TwentyThree CMS执行简单网格，并在Safari中遇到相同的错误。无论如何，这解决了我：

.flex-container:before {
  display: inline;
}

Answer 6

Bootstrap 4有display：block;从css或.row类的javascript设置时的属性。我想到了解决方案只需创建一个类：

＆＃13;

.display-block {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-ms-flex-wrap: wrap !important;
	flex-wrap: wrap !important;
}

＆＃13;

然后在要显示行时应用此类。

Answer 7

这似乎是Safari的渲染中的一个错误，导致列溢出（并因此换行）Bootstrap容器（可能是某种Webkit舍入错误？）。由于您使用的是Bootstrap，因此您应该能够在不使用flex的情况下获得所需的结果：

class ledControler {
    public:
        void ledOn();
        void ledOff();
        void ledStrobe();
        void ledFade();
        ledControler(int);
    private:
        int pinNumber = 0;
};

ledControler::ledControler(int pin) {
    pinNumber = pin;
    pinMode(pinNumber, OUTPUT);
}

void ledControler::ledOn() {
    digitalWrite(pinNumber, HIGH);
}

void ledControler::ledOff () {
    digitalWrite(pinNumber, LOW);
}

void ledControler::ledStrobe(int time) {
    digitalWrite(pinNumber, HIGH);
    delay(time);
    digitalWrite(pinNumber, LOW);
    delay(time);
}

但是！现在看你的例子的问题是，你需要保持你的产品块完全相同的大小，或者网格不会保持它的形状。一种可能的解决方案是给.product一个固定的高度并使用媒体查询进行调整。

以下是我在Safari和其他浏览器中运行的示例： http://codepen.io/anon/pen/PZbNMX 此外，您可以使用样式规则将图像或描述文本保持在一定的大小内，以便于维护。

另一种可能的解决方案是使用脚本或jQuery插件来实现更加动态的统一大小调整，但我并不熟悉那些东西。

我在尝试使用Safari组合flex和Bootstrap时遇到了同样的问题，所以我希望这会有所帮助。

Answer 8

我遇到了同样的问题，答案是safari上的Flex框似乎不喜欢在显示的同一div上清除浮动：flex。

Answer 9

.row:before, .row:after {
content:'';
display:block;
width:100%;
height:0;
}
.row:after {
clear:both;
}

Answer 10

我能够通过添加

来修复它

.row:before, .row:after {
display: flex !important;
}

显然，这不是最优雅的解决方案，但在此之前它可能对某些人有用，直到他们解决它。

Answer 11

我也在这个问题上花了几个小时。在我的例子中，我在现有项目中插入了flexbox，以使dateFormater.dateFormat = "'Optional'(mm),'Optional'(dd),'Optional'(yyyy)"中的所有元素具有相同的高度。除了Safari之外的所有浏览器都正确地呈现了它，但上述答案都没有解决我的问题。

直到我发现仍有2017-01-18 18:01:00 +0000 row黑客被使用：（代码来自laravel项目，但通用Bootstrap，否则）

Bootstrap

显然，除了Safari之外，其他浏览器在使用flexbox时会以某种方式忽略clearfix。

因此，在列上使用flexbox时，不再需要使用Bootstrap的clearfix。

Answer 12

如果您将display flex与flex-wrap一起使用，我解决了它对行的伪元素之前和之后施加较高顺序的问题，因此它们将作为最后一个元素放置。

.row.flex_class {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.row.flex_class::before, .row.flex_class::after {
    order: 10;
}

Flexbox包装Safari

12 个答案: