堆栈内存溢出
  繁体   English   中英

为什么更新chrome浏览器到108开始的版本后Span元素基线变了

[英]why Span element baseline has changed after updating chrome browser to version starts from 108

 原文  2022-12-05 11:44:54  2   2    javascript/ html/ css/ google-chrome

问题描述

从107.0.5304.87 (Official Build) (64-bit)更新到 chrome 版本108.0.5359.94 (Official Build) (64-bit)位）后， span元素受到严重影响。 当多个跨度一个接一个地放置时，它只是改变了它的基线。

预期的行为：跨度应该在向上（v-107）而不是向下（v-108）方向上增长。

在 chrome 107.0.5304.87 版本中在此处输入图像描述

在 chrome 版本 108.0.5359.94 中在此处输入图像描述

上传代码，它会根据您的 chrome 版本给出以上 2 张图片所示的任何结果。 

 <html> <body> <div dir="auto" style="line-height: 2.5; text-align: left;"> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> </div> </body> </html>

如何在新更新的谷歌浏览器版本中获得旧行为？

2 个解决方案

解决方案1
 1  2022-12-05 11:48:34

<html><head></head><body>
        <div dir="auto" style="line-height: 2.5;text-align: left;display: flex;flex-wrap: wrap;">
    
                <span data-start_offset="0" data-end="28" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;">Lorem ipsum dolor sit amet, </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0);background: rgb(255, 255, 255);position: relative;padding: 0px;cursor: default;display: flex;flex-direction: column-reverse;opacity: 0.9;line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px;height: 23px;background: rgb(255, 0, 199);position: absolute;z-index: -2;"></div>
                            <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
        
        
        <span data-start_offset="0" data-end="28" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;">Lorem ipsum dolor sit amet, </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
                            <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
        
        
        
        <span data-start_offset="0" data-end="28" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;">Lorem ipsum dolor sit amet, </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
                            <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
                <span style="
    align-content: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
        
        
        
        <span data-start_offset="0" data-end="28" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;">Lorem ipsum dolor sit amet, </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
                            <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
        
        
        
        <span data-start_offset="0" data-end="28" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;">Lorem ipsum dolor sit amet, </span>
                <span style="
    align-self: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
                            <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
                                <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
                            </span>
                        </mark>
                    </span>
                </span>
                <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
                <span style="
    align-content: flex-end;
">
                    <span style="display: inline-flex; align-items: flex-end; position: relative;">
                        <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
                            <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                            <span title="Name" class="" style="display: flex; min-height: 1.2em;">
                                <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span>
                            </span>
                        </mark>
                    </span>
                </span>
            </div>


</body></html>

变化是：

  • 显示：弹性； 弹性包装：包装； - 包装 div
  • 对齐自我：弹性结束； - 到应该留在底部的内容
  • 行高：1.5em； - 应该与基线正确对齐的项目

解决方案2
 1 已采纳  2022-12-06 02:23:07

更改来自此 CL ，它链接到问题 885175 。
从那个问题我们可以看出 Chrome 确实实现了align-self: last baseline值。

注意：我有点发现这个值，但我对之前发生的、现在发生的或应该发生的事情并没有 100% 的信心。 如果有人想纠正我，请这样做。

align-self的默认值显然成为其新实现中的first baseline 。 我不确定它之前是什么（或者它在其他 UA 中是什么），计算值auto对我来说有点困难，但它显然与last baseline具有相同的行为，至少与当前 Chrome 的first baseline 。

因此，为了在 Chrome >= 108 中获得与在其他 UA 和之前的 Chrome 中相同的行为，您可以强制将内部 flex 容器（基本上是您的<mark>元素）的align-self值设置为last baseline 。

这是修复后的最小重现： 

 .parent-flex { display: inline-flex; align-items: flex-end; }.column { display: flex; flex-direction: column-reverse; } /* For the demo we apply the fix only when the input is checked. You would obviously add it in your.column rule, or in OP's case on their <mark> elements */:checked ~ *.column { align-self: last baseline; }
 <label for=inp>Apply the fix</label><input type=checkbox id=inp><br><br> <span>Inline</span> <span class="parent-flex"> <span class="column"> <span>row</span> <span>row</span> <span>row</span> </span> </span>

OP 的修复代码非常少： 

 mark { align-self: last baseline }
 <div dir="auto" style="line-height: 2.5; text-align: left;"> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div> <span title="Noun" class="" style="display: flex; min-height: 1.2em;"> <span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span> </span> </mark> </span> </span> <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span> <span> <span style="display: inline-flex; align-items: flex-end; position: relative;"> <mark id="57_61_9137407f-934d-4d0a-95fe-5c5205edf092" data-start_offset="57" data-end="61" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">Cras <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div> <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> <span title="Name" class="" style="display: flex; min-height: 1.2em;"> <span id="9137407f-934d-4d0a-95fe-5c5205edf092" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(97, 0, 255); max-width: 33px; min-width: 33px; margin-left: 0px; flex: 1 1 0%;">Name</span> </span> </mark> </span> </span> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么我的 span 元素在 function 调用后没有更新？ 值更改后将值从一个元素复制到另一个元素？ <span>一旦“ keypress”更改了所选<span>元素</span>的类，则将</span> “ keypress” function（）应用到下一个<span><span>元素</span></span> Span元素未正确更新 如何让chrome /浏览器了解javascript代码已更改？ 为什么元素只有在计时器结束后才开始旋转 将Chrome更新到版本60后，布局过程变慢 更新后，MongoDB不再启动 Chrome Mobile 108：触摸取消未触发 如何在DOM更改后检查元素是否为空？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM