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

如何解决防止 Chrome 浏览器将位置属性转换为插图

我几天来一直在与这个问题作斗争，但我不确定为什么 chrome 浏览器将 CSS 位置属性（顶部、右侧、底部、左侧）转换为插入属性（大多数浏览器通常不支持）。

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

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

但如果我使用 Brave 或 Safari 等浏览器使用编辑器构建我的页面，CSS 位置属性将保持顶部、右侧、底部、左侧。 （见下图）

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

在正确方向上的任何帮助将不胜感激。

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

更新 2
编辑器保存 HTML，所有浏览器都使用 HTML。当使用 chrome 编辑页面并且 CSS position 属性更新为 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.

解决方法

我在使用 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;
    },'');
}
``