防止Chrome浏览器将position属性转换为inset

Question

我已经和这个问题斗争了好几天了，我不知道为什么 chrome 浏览器将 CSS 位置属性（上、右、下、左）转换为插入属性（大多数浏览器通常不支持）。

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

但是当您在其他浏览器上使用 inset 属性查看在 chrome 上创建的元素时。插入属性将被删除或删除并带有警告

Unsupported Property Name

（参见下图）

但是，如果我使用 Brave 或 Safari 等浏览器使用编辑器构建页面，则 CSS 位置属性仍为上、右、下、左。 （见下图）

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

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

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

更新2
编辑器保存 HTML，并且该 HTML 可在所有浏览器中使用。当使用 chrome 编辑页面并且 CSS 位置属性更新为

Inset

...

Inset

然后在所有浏览器中使用（并且这些浏览器不支持它（safari 和 Brave））...但是如果我从 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

刚刚遇到了类似的问题。将“!important”添加到任何一个位置属性中都会阻止转换为插图（很奇怪）。

以我为例：

top: 0;
right: 0;
bottom: 0;
left: 0;

对此：

top: 0 !important;
right: 0;
bottom: 0;
left: 0;

Answer 2

当我使用 Angular ngStyle 时，我也遇到同样的问题
[1]

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

我找到了一个解决方法，仅供大家参考。希望有帮助：
[2]

<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;
    }, '');
}
``

Answer 3

您还可以为元素添加 width: 100%、height: 100%，以保持位置。

Answer 4

只想补充我的两分钱。在我的特定情况下，将位置属性转换为插入的 css 转换是由我的打包程序 esbuild 完成的，作为其 minify 例程的一部分。

因此，我建议作为一种调试措施，尝试关闭捆绑器的缩小功能，以查看到

inset

的转换是否停止。

我尝试这样做，但转变停止了。因此，我相信不是 Chrome 在进行转换，而是你的缩小器。