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

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

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.

  1. <html>
  3. <body>
  4.         <div dir="auto" style="line-height: 2.5; text-align: left;">
  5.                 <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span>
  6.                 <span>
  7.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  8.                         <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>
  9.                             <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
  10.                             <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
  11.                                 <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>
  12.                             </span>
  13.                         </mark>
  14.                     </span>
  15.                 </span>
  16.                 <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span>
  17.                 <span>
  18.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  19.                         <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>
  20.                             <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
  21.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  22.                                 <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>
  23.                             </span>
  24.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  25.                                 <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>
  26.                             </span>
  27.                         </mark>
  28.                     </span>
  29.                 </span>
  30.         
  31.         
  32.         <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span>
  33.                 <span>
  34.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  35.                         <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>
  36.                             <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
  37.                             <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
  38.                                 <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>
  39.                             </span>
  40.                         </mark>
  41.                     </span>
  42.                 </span>
  43.                 <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span>
  44.                 <span>
  45.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  46.                         <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>
  47.                             <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
  48.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  49.                                 <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>
  50.                             </span>
  51.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  52.                                 <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>
  53.                             </span>
  54.                         </mark>
  55.                     </span>
  56.                 </span>
  57.         
  58.         
  59.         
  60.         <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span>
  61.                 <span>
  62.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  63.                         <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>
  64.                             <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
  65.                             <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
  66.                                 <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>
  67.                             </span>
  68.                         </mark>
  69.                     </span>
  70.                 </span>
  71.                 <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span>
  72.                 <span>
  73.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  74.                         <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>
  75.                             <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
  76.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  77.                                 <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>
  78.                             </span>
  79.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  80.                                 <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>
  81.                             </span>
  82.                         </mark>
  83.                     </span>
  84.                 </span>
  85.         
  86.         
  87.         
  88.         <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span>
  89.                 <span>
  90.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  91.                         <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>
  92.                             <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
  93.                             <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
  94.                                 <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>
  95.                             </span>
  96.                         </mark>
  97.                     </span>
  98.                 </span>
  99.                 <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span>
  100.                 <span>
  101.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  102.                         <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>
  103.                             <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
  104.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  105.                                 <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>
  106.                             </span>
  107.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  108.                                 <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>
  109.                             </span>
  110.                         </mark>
  111.                     </span>
  112.                 </span>
  113.         
  114.         
  115.         
  116.         <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span>
  117.                 <span>
  118.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  119.                         <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>
  120.                             <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
  121.                             <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
  122.                                 <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>
  123.                             </span>
  124.                         </mark>
  125.                     </span>
  126.                 </span>
  127.                 <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span>
  128.                 <span>
  129.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  130.                         <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>
  131.                             <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
  132.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  133.                                 <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>
  134.                             </span>
  135.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  136.                                 <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>
  137.                             </span>
  138.                         </mark>
  139.                     </span>
  140.                 </span>
  141.             </div>
  142. </body>
  144. </html>

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

google-chrome

2条答案

按热度按时间
bt1cpqcv

bt1cpqcv1#

  1. <html><head></head><body>
  2.         <div dir="auto" style="line-height: 2.5;text-align: left;display: flex;flex-wrap: wrap;">
  3.     
  4.                 <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>
  5.                 <span style="
  6.     align-self: flex-end;
  7. ">
  8.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  9.                         <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>
  10.                             <div style="min-width: 88px;height: 23px;background: rgb(255, 0, 199);position: absolute;z-index: -2;"></div>
  11.                             <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
  12.                                 <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>
  13.                             </span>
  14.                         </mark>
  15.                     </span>
  16.                 </span>
  17.                 <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
  18.                 <span style="
  19.     align-self: flex-end;
  20. ">
  21.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  22.                         <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>
  23.                             <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
  24.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  25.                                 <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>
  26.                             </span>
  27.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  28.                                 <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>
  29.                             </span>
  30.                         </mark>
  31.                     </span>
  32.                 </span>
  33.         
  34.         
  35.         <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>
  36.                 <span style="
  37.     align-self: flex-end;
  38. ">
  39.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  40.                         <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>
  41.                             <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
  42.                             <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
  43.                                 <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>
  44.                             </span>
  45.                         </mark>
  46.                     </span>
  47.                 </span>
  48.                 <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
  49.                 <span style="
  50.     align-self: flex-end;
  51. ">
  52.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  53.                         <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>
  54.                             <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
  55.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  56.                                 <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>
  57.                             </span>
  58.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  59.                                 <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>
  60.                             </span>
  61.                         </mark>
  62.                     </span>
  63.                 </span>
  64.         
  65.         
  66.         
  67.         <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>
  68.                 <span style="
  69.     align-self: flex-end;
  70. ">
  71.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  72.                         <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>
  73.                             <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
  74.                             <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
  75.                                 <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>
  76.                             </span>
  77.                         </mark>
  78.                     </span>
  79.                 </span>
  80.                 <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
  81.                 <span style="
  82.     align-content: flex-end;
  83. ">
  84.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  85.                         <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>
  86.                             <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
  87.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  88.                                 <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>
  89.                             </span>
  90.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  91.                                 <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>
  92.                             </span>
  93.                         </mark>
  94.                     </span>
  95.                 </span>
  96.         
  97.         
  98.         
  99.         <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>
  100.                 <span style="
  101.     align-self: flex-end;
  102. ">
  103.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  104.                         <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>
  105.                             <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
  106.                             <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
  107.                                 <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>
  108.                             </span>
  109.                         </mark>
  110.                     </span>
  111.                 </span>
  112.                 <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
  113.                 <span style="
  114.     align-self: flex-end;
  115. ">
  116.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  117.                         <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>
  118.                             <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
  119.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  120.                                 <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>
  121.                             </span>
  122.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  123.                                 <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>
  124.                             </span>
  125.                         </mark>
  126.                     </span>
  127.                 </span>
  128.         
  129.         
  130.         
  131.         <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>
  132.                 <span style="
  133.     align-self: flex-end;
  134. ">
  135.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  136.                         <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>
  137.                             <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
  138.                             <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
  139.                                 <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>
  140.                             </span>
  141.                         </mark>
  142.                     </span>
  143.                 </span>
  144.                 <span data-start_offset="39" data-end="57" style="white-space: break-spaces;align-self: flex-end;line-height: 1.5;"> adipiscing elit. </span>
  145.                 <span style="
  146.     align-content: flex-end;
  147. ">
  148.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  149.                         <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>
  150.                             <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
  151.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  152.                                 <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>
  153.                             </span>
  154.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  155.                                 <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>
  156.                             </span>
  157.                         </mark>
  158.                     </span>
  159.                 </span>
  160.             </div>
  162. </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:

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

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

  1. mark { align-self: last baseline }
  1. <div dir="auto" style="line-height: 2.5; text-align: left;">
  2.                 <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span>
  3.                 <span>
  4.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  5.                         <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>
  6.                             <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
  7.                             <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
  8.                                 <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>
  9.                             </span>
  10.                         </mark>
  11.                     </span>
  12.                 </span>
  13.                 <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span>
  14.                 <span>
  15.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  16.                         <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>
  17.                             <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
  18.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  19.                                 <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>
  20.                             </span>
  21.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  22.                                 <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>
  23.                             </span>
  24.                         </mark>
  25.                     </span>
  26.                 </span>
  27.         
  28.         
  29.         <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span>
  30.                 <span>
  31.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  32.                         <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>
  33.                             <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
  34.                             <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
  35.                                 <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>
  36.                             </span>
  37.                         </mark>
  38.                     </span>
  39.                 </span>
  40.                 <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span>
  41.                 <span>
  42.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  43.                         <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>
  44.                             <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
  45.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  46.                                 <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>
  47.                             </span>
  48.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  49.                                 <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>
  50.                             </span>
  51.                         </mark>
  52.                     </span>
  53.                 </span>
  54.         
  55.         
  56.         
  57.         <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span>
  58.                 <span>
  59.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  60.                         <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>
  61.                             <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
  62.                             <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
  63.                                 <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>
  64.                             </span>
  65.                         </mark>
  66.                     </span>
  67.                 </span>
  68.                 <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span>
  69.                 <span>
  70.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  71.                         <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>
  72.                             <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
  73.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  74.                                 <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>
  75.                             </span>
  76.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  77.                                 <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>
  78.                             </span>
  79.                         </mark>
  80.                     </span>
  81.                 </span>
  82.         
  83.         
  84.         
  85.         <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span>
  86.                 <span>
  87.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  88.                         <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>
  89.                             <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
  90.                             <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
  91.                                 <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>
  92.                             </span>
  93.                         </mark>
  94.                     </span>
  95.                 </span>
  96.                 <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span>
  97.                 <span>
  98.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  99.                         <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>
  100.                             <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
  101.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  102.                                 <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>
  103.                             </span>
  104.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  105.                                 <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>
  106.                             </span>
  107.                         </mark>
  108.                     </span>
  109.                 </span>
  110.         
  111.         
  112.         
  113.         <span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span>
  114.                 <span>
  115.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  116.                         <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>
  117.                             <div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
  118.                             <span title="Noun" class="" style="display: flex; min-height: 1.2em;">
  119.                                 <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>
  120.                             </span>
  121.                         </mark>
  122.                     </span>
  123.                 </span>
  124.                 <span data-start_offset="39" data-end="57" style="white-space: break-spaces;"> adipiscing elit. </span>
  125.                 <span>
  126.                     <span style="display: inline-flex; align-items: flex-end; position: relative;">
  127.                         <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>
  128.                             <div style="min-width: 33px; height: 23px; background: rgb(97, 0, 255); position: absolute; z-index: -2;"></div>
  129.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  130.                                 <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>
  131.                             </span>
  132.                             <span title="Name" class="" style="display: flex; min-height: 1.2em;">
  133.                                 <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>
  134.                             </span>
  135.                         </mark>
  136.                     </span>
  137.                 </span>
  138.             </div>
展开查看全部
赞(0）分享  回复(0）举报  2022-12-06
我来回答

相关问题

    查看更多

    热门标签

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

    最新问答

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