Html Flex在IE和Chrome中不工作

由于某些原因，

flex

属性在IE中不起作用。我不确定问题在哪里，请有人对此进行调查

我无法设置固定宽度，因为将动态添加/删除

div

s

#存储表{
宽度：100%；
字体系列：arial；
边界间距：0；
背景：#8ff；
显示：表格；
}
#tr{
浮动：左；
宽度：100%；
垫底：5px；
高度：自动；
}
#运输署{
浮动：左；
填充物：5px 5px；
字体大小：12px；
线高：18px；
断字：断字；
}
#存储表#thead{
背景：#edece9；
高度：自动；
浮动：左；
宽度：100%；
宽度：650px\9；
最小宽度：650px；
显示器：flex；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
}
.商店名称，
.store_state，
.商店电话，
.store_add，
.store_state，
.store_city，
.store_zip，
.商店方向{
/*宽度：20%*/
/*显示：内联块*/
柔性生长：1；
边框：1px实心#f00；
-webkit-box-flex:1；
/*旧版-iOS 6-，Safari 3.1-6*/
-moz-box-flex:1；
/*OLD-Firefox 19-*/
宽度：20%；
/*对于旧语法，否则将崩溃*/
-webkit-flex:1；
/*铬*/
-ms-flex:1；
/*IE 10*/
弹性：1；
/*新，规范-Opera 12.1，Firefox 20+*/
/*宽度：25%\9*/
/*显示：内联块\9*/
最小宽度：10px；
显示：内联块！重要；
显示：内联块；
*缩放：1；
*显示：内联；
}

店名
地址
城市
方向
购物者药店
埃格林顿大道550号埃格林顿西
多伦多
购物者药店
永街2345号爱迪生中心
多伦多
购物者药店
圣克莱尔大道523号西圣克莱尔和；巴瑟斯特
多伦多
购物者药店
永和街1507号永和；圣克莱尔
多伦多
购物者药店
普莱森特山路759号普莱森特山路
多伦多
购物者药店
巴斯赫斯特街3110号劳伦斯广场
北约克
购物者药店
1500大道及；劳伦斯
多伦多
购物者药店
埃格林顿大道西1840号埃格林顿；达夫林
多伦多
购物者药店
292杜邦St Spadina&；杜邦
多伦多
福蒂诺斯
劳伦斯大道西700号
北约克
洛布罗夫
杜邦街650号
多伦多
地铁
埃格林顿大道东656号
多伦多
购物者药店
湾景大道1531号湾景大道1531号
多伦多
购物者药店
3089达夫林圣达夫林酒店；劳伦斯
多伦多
购物者药店
伊格林顿大道西西侧购物中心2340号
多伦多
购物者药店
谢伯恩街565号；霍华德
多伦多
地铁
劳伦斯大道西1411号
北约克
沃尔玛
劳伦斯大道西1305号
多伦多

我已经找到了Flex的替代品，

HTML：
标题1

标题2

标题3

第1行第1列

第1行第2列

第1行第3列

第2行第1列

第2行第2列

第2行第3列

CSS:
.桌子{
显示：表格；
边框：1px实心#f00；
宽度：100%；
}
标题
{
显示：表格标题；
文本对齐：居中；
字体大小：粗体；
字体大小：较大；
}
标题
{
显示：表格行；
字体大小：粗体；
文本对齐：居中；
}
一行
{
显示：表格行；
}
.细胞
{
显示：表格单元格；
边框：实心；
边界宽度：薄；
左侧填充：5px；
右侧填充：5px；
}

我已经找到了Flex的替代品，

HTML：
标题1

标题2

标题3

第1行第1列

第1行第2列

第1行第3列

第2行第1列

第2行第2列

第2行第3列

CSS:
.桌子{
显示：表格；
边框：1px实心#f00；
宽度：100%；
}
标题
{
显示：表格标题；
文本对齐：居中；
字体大小：粗体；
字体大小：较大；
}
标题
{
显示：表格行；
字体大小：粗体；
文本对齐：居中；
}
一行
{
显示：表格行；
}
.细胞
{
显示：表格单元格；
边框：实心；
边界宽度：薄；
左侧填充：5px；
右侧填充：5px；
}

您使用的IE版本是什么@tenderloin:IE9/或者flex的任何替代品？首先，你正在使用IDs…你不能这么做。尝试切换到类以重复属性。您正在使用哪个版本的IE@tenderloin:IE9/或者flex的任何替代品？首先，你正在使用IDs…你不能这么做。尝试切换到类以重复属性。

HTML : 

<div class="Table">
    <div class="Heading">
        <div class="Cell">
            <p>Heading 1</p>
        </div>
        <div class="Cell">
            <p>Heading 2</p>
        </div>
        <div class="Cell">
            <p>Heading 3</p>
        </div>

    </div>

    <div class="Row">
        <div class="Cell">
            <p>Row 1 Column 1</p>
        </div>
        <div class="Cell">
            <p>Row 1 Column 2</p>
        </div>
        <div class="Cell">
            <p>Row 1 Column 3</p>
        </div>
    </div>
    <div class="Row">
        <div class="Cell">
            <p>Row 2 Column 1</p>
        </div>
        <div class="Cell">
            <p>Row 2 Column 2</p>
        </div>
        <div class="Cell">
            <p>Row 2 Column 3</p>
        </div>
    </div>
</div>




CSS : 

    .Table {
        display: table;
        border : 1px solid #f00;
        width : 100%;
    }
    .Title
    {
        display: table-caption;
        text-align: center;
        font-weight: bold;
        font-size: larger;
    }
    .Heading
    {
        display: table-row;
        font-weight: bold;
        text-align: center;
    }
    .Row
    {
        display: table-row;
    }
    .Cell
    {
        display: table-cell;
        border: solid;
        border-width: thin;
        padding-left: 5px;
        padding-right: 5px;
    }