使用打字稿应用 css 网格样式在 IE 中不起作用。浏览器

Question

我有一个标题栏，我在其中应用 css 使用 Vue js 中的打字稿方法。该样式是关于将行和列值应用于 CSS 网格。由于我使用的是动态值，因此我必须使用方法来内联应用这些值。下面是我的代码：

HTML:

<div :style="getTitleStyle(rowIndex, columnIndex)">{{title}}
</div>

打字稿：

 getTitleStyle: function(rowIndex, columnIndex) {
        return {
          'grid-row-start': rowIndex,
          '-ms-grid-row': rowIndex,
          'grid-column-start': columnIndex,
          '-ms-grid-column': columnIndex
        }
      }

因此正在应用内联样式，但由于 IE 11 未呈现我提供的内联样式。这里 rowIndex 和 columnIndex 包含行和列的整数值。

Answer 1

IE 不支持网格。我建议你改用 flex。还。 Flex 无法在 IE 11 下正常工作。如果 parents 具有 display-flex，则 flex 将不适用于具有 min-height 和 max-height 属性的项目，因此请注意这一点。

您可以查看任何其他信息here

Answer 2

所以我找到了一个有点奇怪的解决方案，但我还是发布了它，因为它可能对某人有所帮助。我能够使用相同属性的 camleCase 版本为 IE 呈现内联样式。

  getTitleStyle: function(rowIndex, columnIndex) {
        return {
          'grid-row-start': rowIndex,
          'grid-column-start': columnIndex,
          msGridColumn:columnIndex,
          msGridRow :rowIndex,
        }
      }

你可以看到，我没有使用传统的 kebab-case('-ms-grid-row')，而是使用驼峰式 (msGridRow)。我不知道 IE11 以这种方式做出反应的原因，但这是我正在推进的解决方案。

使用打字稿应用 css 网格样式在 IE 中不起作用。浏览器

Applying css grid style using typescript not working in IE. Vue JS

css

typescript

internet-explorer-11

css-grid

vue.js