防止 Chrome 浏览器将位置属性转换为插入

Question

我这几天一直在与这个问题作斗争，我不确定为什么 chrome 浏览器会将 CSS 位置属性（上、右、下、左）转换为 inset 属性（大多数浏览器通常不支持）。

我在一个编辑器中工作，当您在 chrome 中编辑元素时，它会将 CSS 位置属性转换为如下所示的插入

但是当您在其他浏览器上使用 inset 属性查看在 chrome 上创建的元素时。 inset 属性被删除或删除并带有警告Unsupported Property Name（见下图）

但是，如果我使用 Brave 或 Safari 等浏览器使用编辑器构建我的页面，CSS 位置属性仍然是 Top、Right、Bottom、Left。 （见下图）

我的问题是我该如何解决这个问题，因为包括我在内的很多人都使用 chrome，而 inset 属性仅适用于 chrome 和 android 设备，不支持 iOS。

我们将不胜感激任何对正确方向的帮助。

更新 1
下面是我的代码，它在 Brave、Safari 上的工作方式与此完全相同，但 chrome 会转换为 inset。

更新 2
编辑器保存 HTML，并且 HTML 用于所有浏览器。当使用 chrome 编辑页面并将 CSS 位置属性更新为 Inset ...Inset 然后在所有浏览器中使用（并且这些浏览器（safari 和勇敢）不支持）...但是如果我从 Brave 浏览器或 safari 编辑我的页面并保存编辑器，使用 top, right, bottom, left CSS 位置属性，页面在所有浏览器上按预期呈现

我的解决方案
以下是我在 jQuery 中解决问题的方法。对于 AngularJS，请参阅@user10245459 的回答。我的解决方案假设您可以访问整个 HTML，因为在我的情况下，每当我保存编辑器时，页面的 HTML 对我都是可用的，所以我创建了一个函数来查看 HTML 代码并更新 inset 之前的样式将 HTML 代码放入文件中

/**
 * A Very stressful/Painful hack for chrome converting Positing
 * Properties to inset, causing text and heading to stack over each other
 * in a corner on iOS mobile, IE/EDGE, Samsung Internet
 */
function updateInsetProperty( HTMLstring ) {
    var _allStyles =  HTMLstring.match(/style="([^"]*)"/g);
    var _insetBank = [];
    $.each(_allStyles, function(i, style){
        var onlyStyleInsetProperty = style.replace(/"/, '').match(/inset:\s?([A-Za-z\s0-9\.\-]+)?/i);
        if( onlyStyleInsetProperty != null ) {
            var _splitInset = onlyStyleInsetProperty[1].split(' ');
            var _insetReplacement = `top:${_splitInset[0]}; right:${_splitInset[1]}; bottom:${_splitInset[2]}; left:${_splitInset[3]}`;
            var formattedStyle = HTMLstring.replace(onlyStyleInsetProperty[0], _insetReplacement);
            HTMLstring = formattedStyle;
        }
    });

    return HTMLstring;
}

那么就可以这样调用函数了。

var htmlCodeForMobile = updateInsetProperty(htmlTmp_mbl);
var htmlCodeForDesktop = updateInsetProperty(htmlTmp_dsk);

 // Note: htmlTmp_mbl is the HTML code for mobile from 
 // the editor (in my case) or HTML from your source 
 // while htmlTmp_dsk is the HTML for desktop.

Answer 1

我在使用 Angular ngStyle 时遇到同样的问题
[1]https://i.stack.imgur.com/GQu0V.png

<div class="content" [ngStyle]="getStyleByKeys(content.propList, styleKeys)"></dvi>

我找到了一个解决方法，仅供您参考。希望对您有所帮助：
[2]https://i.stack.imgur.com/cNqVd.png

<div class="content" [attr.style]="(getStyleString(getStyleByKeys(content.propList, styleKeys))) | safeStyle"></div>

import { pick } from 'lodash';

getStyleByKeys(props, keys): any {
    let res = {};

    if ( !props ) { return {}; }
    if ( keys ) { res = pick(props, keys); }
    return res;
}
getStyleString(o: any): any {
    return Object.keys(o).reduce((style, i) => {
        style += `${i}: ${o[i]}; `;
        return style;
    }, '');
}
``