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

qgelzfjb  于 2022-12-06  发布在  Go
关注(0)|答案(2)|浏览(99)

After updating to chrome Version 108.0.5359.94 (Official Build) (64-bit) from 107.0.5304.87 (Official Build) (64-bit) The span element got severely affected. It just changed it's baseline when multiple span were place one top of other.

Expected beaviour: Span should grow on top-wards(v-107) not on bottom-wards(v-108) direction.
in version 107.0.5304.87 of chrome

in version 108.0.5359.94 of chrome

Uploaded the code and it give any of the result as shown in above 2 images based on your chrome version.

<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>

How to get old behaviour in new updated google chrome version?

google-chrome

2条答案

按热度按时间
bt1cpqcv

bt1cpqcv1#

<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>
赞(0）分享  回复(0）举报  2022-12-06
cxfofazt

cxfofazt2#

The change comes from this CL , which links to the issue 885175 .
From that issue we can see that Chrome did implement the align-self: last baseline value.

  • Note: I kind of discover this value and I'm not 100% confident on what exactly happened before, happens now, or, should happen. If one wants to correct me, please do so.*

The default value for align-self apparently becomes first baseline in their new implementation. I'm not sure what it was before (or what it is in other UAs), computing the value auto is bit of a rabbit hole for me, but it apparently had the same behavior as last baseline , and at least not the same as current Chrome's first baseline .
So, to get the same behavior in Chrome >= 108 than in other UAs and previous Chromes, you can force the align-self value of your inner flex containers (basically your <mark> elements) to be last baseline .
Here is a minimal-repro with the fix:

.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>

And OP's very not minimal code with the fix:

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>
赞(0）分享  回复(0）举报  2022-12-06
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com