Блог

Главная - Вопросы по программированию - Chrome 92 немного по-другому отображает CSS

Chrome 92 немного по-другому отображает CSS

#html #css #google-chrome #firefox #cross-browser

Вопрос:

У меня есть этот фрагмент кода, который до прошлой недели, когда я использовал Chrome 86.x, работал нормально, но теперь, после обновления Chrome, CSS немного сбился. В настоящее время я работаю в Version 92.0.4515.131 Chrome

В Chrome 86.x и Firefox 90.0.2 не было зазора между входом Some Text и Search входом. Но теперь в Chrome 92.x, похоже, есть это пространство между этими двумя элементами.

После проверки, если я удалю гибкую основу 100% , она будет работать, и она будет хорошо смотреться как на хроме 86, так и на хроме 92. Есть несколько областей моего кода, в которых я, похоже, сталкиваюсь с этой проблемой, и удаление гибкой основы везде, по-видимому, не является решением.

Является ли это ошибкой в Chrome, из-за которой он неправильно интерпретирует гибкую основу?

 <html lang="en">
   <head>
      <style type="text/css">
         .Wrapper--3Ct6E > div {
         height: 100%; }
      </style>
   </head>
   <body>
      <div style="display: flex; flex-flow: row nowrap; place-content: stretch space-between; align-items: stretch;">
         <div class="Wrapper--3Ct6E">
            <div style="display: flex; flex-flow: column nowrap; place-content: stretch flex-start; align-items: stretch;">
               <div style="display: flex; flex-flow: column nowrap; place-content: stretch flex-start; align-items: stretch;">
                  <div style="max-width: 100%; flex: 1 0 100%;">
                     <div>
                        <span>Some Text </span> 
                     </div>
                  </div>
                  <div>
                    <input placeholder="Search" type="text" disabled="" value=""> 
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>
Метки: