关于CSS：在Internet Explorer 11中使用d-flex和flex-wrap


Using d-flex and flex-wrap in Internet Explorer 11

我已经知道之前曾有人问过这个问题，我尝试了提供的不同答案，但是似乎没有一个在我的代码上起作用。
我正在修复在Chrome和Firefox中的两列中显示的一系列输入，但在IE11中不显示。

这是在Chrome浏览器上的外观

enter

1
2
3
4
5
    <div *ngFor="let field of fieldsToDisplay;let i = index"
         ng-class="'address-single-div-class w-100': field.FieldType.toString() == FieldType_Type.Textarea.toString(), 'address-single-div-class': field">
        <input-field
            *** series of inputs ***
        </input-field>
相关讨论

好，所以我通过在第二个具有输入字段的div中添加width:50%来解决我的问题。您可以看到我在问题中附加的图像以供参考。
显然，由于某些错误，flex-wrap在IE11中无法正常工作。因此，IE11无需package元素，而是扩展了容器。通过添加宽度我预定义了容器的大小，这样它实际上包裹了输入字段并为它们提供了完整的输入大小，因此我不需要使用flex-fill。另外，它不会影响Chrome或Firefox中的显示。

相关讨论

尝试为输入字段添加col-*类，请检查以下示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    Bootstrap Example
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
</head>
<body>

     
        <p><center>[wp_ad_camp_2]</center></p><p>Use .flex-fill on flex items to force them into equal widths:</p>
       
            <input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 1" />
            <input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 2" />
            <input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 3" />
            <input type="text" class="p-2 flex-fill form-control col-4" value="Flex item 4" />
         
   
</body>
</html>

在IE11浏览器中的结果：

enter

相关讨论