增加一个div弯曲时，另一个不上的Safari

工作隐藏着我有如下代码：增加一个div弯曲时，另一个不上的Safari

angular.module("myApp", []).controller("myController", function($scope) { 
 
    $scope.toggleBlue = false; 
 
});

span { 
 
    cursor: pointer; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    padding: 10px; 
 
    background-color: grey; 
 
    margin-top: 10px; 
 
} 
 
.row { 
 
    width: 35%; 
 
} 
 
.first { 
 
    flex: 1; 
 
    background-color: red; 
 
} 
 
.second { 
 
    display: flex; 
 
} 
 
.toggle { 
 
    width: 80%; 
 
    background-color: blue; 
 
} 
 
.decrease { 
 
    width: 30px; 
 
    height: 20px; 
 
    background-color: yellow; 
 
} 
 
.noWidth { 
 
    width: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myApp" ng-controller="myController"> 
 
    <span ng-click="toggleBlue = !toggleBlue">TOGGLE BLUE BOX</span> 
 
    <div class="wrapper"> 
 
    <div class="row first"></div> 
 

 
    <div class="row second" ng-class="{noWidth: toggleBlue}"> 
 
     <div class="toggle" ng-if="!toggleBlue"></div> 
 
     <div class="decrease"></div> 
 
    </div> 
 
    </div> 
 
</body>

当我点击文本“切换蓝盒子”，它应该隐藏ng-if的蓝色框，增加红色框以填充flex: 1;，并用ng-class更改黄色框的宽度。所以它应该简单地切换蓝色框。这对Chrome很有效。但是当我在Safari浏览器的iPad上试用它时，它将删除蓝色框，但不会增加红色框。另外，黄盒比不到底的背后红色的是这样的：

我预期的结果是像这里的片段是相同的。我如何解决这在safari上？我尝试flex 1;的情况下，但它没有奏效。有任何想法吗？

感谢

来源

2016-07-28 MrBuggy

为什么你使用'宽度：35％;''为.row'？ – 3rdthemagical

Safari版本？ –

@ 3rdthemagical，因为我想有35％的灰度作为宽度...我认为这不是错误，并不是很重要... – MrBuggy

好吧......我有点困惑关于你的代码。你定义了显示器的flex，但是并没有真正在你的所有子元素上使用它。我已经尽我所能地理解了这一点，但让我知道是否有什么东西在这里。另外，如果你想知道为什么Safari会吓坏了，那么基本上你的CSS没有遵循正确的标准（没有在所有儿童控件上定义flex）。

angular.module("myApp", []).controller("myController", function($scope) { 
 
    $scope.toggleBlue = false; 
 
});

span { 
 
    cursor: pointer; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    background-color: grey; 
 
    padding: 10px; 
 
    height: 25px; 
 
} 
 
.first { 
 
    flex: 1 1 35px; 
 
    background-color: red; 
 
} 
 
.second { 
 
    flex: 1 1 35px; 
 
    background-color: blue; 
 
} 
 
.third{ 
 
    flex: 0 0 35px; 
 
    background-color: yellow; 
 
} 
 
.noWidth { 
 
    flex: 0 0 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="myApp" ng-controller="myController"> 
 
    <span ng-click="toggleBlue = !toggleBlue">TOGGLE BLUE BOX</span> 
 
    <div class="wrapper"> 
 
    <div class="first"></div> 
 
    <div class="second" ng-class="{noWidth: toggleBlue}"></div> 
 
    <div class="third"></div> 
 
    </div> 
 
</body>

来源

2016-07-28 08:08:57 k2snowman69

嗨，我删除了类与div后.row .second它的工作原理没有改变别的东西。谢谢！ – MrBuggy

@MrBuggy我仍然会确保使用'display：flex'的元素的任何子元素都有'flex：1 1 auto'或类似的东西。如果你没有浏览器必须使用一些奇怪的备份方案，它们可能无法正确工作跨浏览器（正如你已经注意到的）。欲了解更多信息这里是一个伟大的教程flexbox！ https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – k2snowman69

是的，我使用'flex：1 1 auto;'如果flex：1;'我改变了它。谢谢先生：） – MrBuggy

添加

.decrease { 
    flex: 1 0; 
}

来源

2016-07-28 07:53:03

嗨，谢谢，但它仍然不工作... – MrBuggy

我不明白你的代码必须如何工作是正确的...（ –

它应该像片段中的工作...我删除蓝色的一个，并用红色的填充它......但在safari它就像片段下面的图片一样，它移除了蓝色，但是红色不填充它，它具有相同的宽度，黄色也不是最后它在红色的后面......比较片段和图片，你会看到它.. – MrBuggy

增加一个div弯曲时，另一个不上的Safari

回答

相关问题