堆棧內存溢出
  簡體   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  8   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