Question

我已经看到有关此问题的类似问题，但它们与Safari的移动版本有关，或者与javascript问题有关。我认为这些都不是我的页面遇到的问题。

我有一段简单的文本，使用CSS将其水平居中，并且文本具有响应性，因此可以在视口内缩放和环绕以始终适合并具有视口的特定百分比宽度。

除了在Safari中，当窗口的宽度小于段落的最大宽度时，CSS在所有浏览器中都可以正常工作，页面加载后的段落最初从左对齐到视口。只有在将视口手动缩放甚至一个像素或将鼠标悬停在具有自己CSS样式的菜单项上之后，该段落才会正确居中。

我不确定我应该在此处包括的所有代码的哪一部分，因此将不胜感激。谢谢。

我已经添加了到我使用简化版代码创建的Codepen的链接，但是Codepen本身没有显示错误，因此我将屏幕截图附加到了图像中。

      * {
          margin: 0;
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
      }
      body, html {
          background-color: black;
      }


      .info_wrapperClass {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        position: relative;
      }
      .infoNoticeParagraphBugreportClass {
        font-size: calc(11px + .5vw);
      }
      @supports ((display: -ms-grid) or (display: grid)) {
        .info_wrapperClass {
          display: -ms-grid;
          display: grid;
          -ms-grid-columns: 1fr auto 1fr;
          grid-template-columns: 1fr auto 1fr;
          -ms-grid-rows: auto 1vh auto 1vh auto 1vh auto 1vh auto 1vh -webkit-min-content;
          -ms-grid-rows: auto 1vh auto 1vh auto 1vh auto 1vh auto 1vh min-content;
          grid-template-rows: auto auto auto auto auto -webkit-min-content;
          grid-template-rows: auto auto auto auto auto min-content;
          grid-row-gap: 1vh;
              grid-template-areas:
                                ". info_heading_area ."
                                ". info_notice_area ."
                                ". info_blog_heading_area ."
                                ". info_text_area ."
                                ". separator_line_area ."
                                ". innerwrapper .";
        }
        .info_headingClass {
          -ms-grid-row: 1;
          -ms-grid-column: 2;
          grid-area: info_heading_area;
        }
        .infoNoticeParagraphClass {
          -ms-grid-row: 3;
          -ms-grid-column: 2;
          grid-area: info_notice_area;
        }
        .info_blog_headingClass {
          -ms-grid-row: 5;
          -ms-grid-column: 2;
          grid-area: info_blog_heading_area;
        }
        .infoBlogParagraphClass {
          -ms-grid-row: 7;
          -ms-grid-column: 2;
          grid-area: info_text_area;
        }
      }
      .info_headingClass {
        margin-top: 40px;
      }
      .infoNoticeParagraphClass {
        padding-bottom: 40px;
        max-width: 100vw;
        -ms-flex-item-align: center;
            -ms-grid-row-align: center;
            align-self: center;
        margin-top: 4vh;
      }
      .infoNoticeParagraphClass p {
        margin-left: 5vw;
        margin-right: 5vw;
        max-width: 60em;
        min-width: 20em;
      }
      .info_blog_headingClass {
        -ms-flex-item-align: center;
            -ms-grid-row-align: center;
            align-self: center;
        margin-top: 4vh;
      }
      .infoBlogParagraphClass {
        padding-bottom: 40px;
        max-width: 100vw;
        -ms-flex-item-align: center;
            -ms-grid-row-align: center;
            align-self: center;
        margin-left: auto;
        margin-right: auto;
        margin-top: 4vh;
      }
      .infoBlogParagraphClass p, h3 {
        margin-left: 5vw;
        margin-right: 5vw;
        max-width: 60em;
        min-width: 20em;
      }
      h1.info_headingClass {
        font-weight: bold;
        font-size: calc(20px + .5vw);
        text-align: center;
        font-family: Verdana, Geneva, sans-serif;
        color: white;
      }
      .infoNoticeParagraphClass p {
        font-size: calc(12px + .5vw);
        text-align: center;
        font-family: Verdana, Geneva, sans-serif;
        color: red;
      }
      h2.info_blog_headingClass {
        font-weight: bold;
        font-size: calc(18px + .5vw);
        text-align: center;
        font-family: Verdana, Geneva, sans-serif;
        color: white;
      }
      .infoBlogParagraphClass > h3 {
        font-weight: bold;
        text-decoration: underline;
        text-align: left;
        font-size: calc(12px + .5vw);
        font-family: Verdana, Geneva, sans-serif;
        padding-bottom: .5em;
        color: white;
      }
      .infoBlogParagraphClass > p {
        text-align: left;
        padding-bottom: 1ch;
        line-height: 1.25em;
        font-size: calc(12px + .25vw);
        font-family: Verdana, Geneva, sans-serif;
        color: white;
      }
      @media screen and (min-width: 1400px) {
        h1.info_headingClass {
          font-size: 1.75em;
        }
        .infoNoticeParagraphClass p {
          font-size: 1.2em;
        }
        .infoNoticeParagraphBugreportClass {
          font-size: 1.2em;
        }
        h2.info_blog_headingClass {
          font-size: 1.7em;
        }
        .infoBlogParagraphClass > h3 {
          font-size: 1.25em;
        }
        .infoBlogParagraphClass > p {
          font-size: 1em;
        }
      }
      @media screen and (max-width: 479px) {
        .info_headingClass {
          margin-top: 10px;
        }
        .infoNoticeParagraphClass {
          padding-bottom: 10px;
          max-width: 90vw;
          min-width: 60vw;
        }
        .infoBlogParagraphClass {
          padding-bottom: 10px;
          max-width: 90vw;
          min-width: 60vw;
        }
        .infoBlogParagraphClass p, h3 {
          margin-left: 5vw;
          margin-right: 5vw;
          max-width: 50em;
          min-width: 20em;
        }
        h1.info_headingClass {
          font-size: calc(16px + .5vw);
        }
        .infoNoticeParagraphClass p {
          font-size: calc(10px + .5vw);
        }
        h2.info_blog_headingClass {
          font-size: calc(14px + .5vw);
        }
        .infoBlogParagraphClass > p{
          padding-bottom: 1ch;
          font-size: calc(10px + .5vw);
        }
      }

<div class="pagecontainer">
      <div class="info_wrapperClass">
        <h1 class="info_headingClass">Lorem Ipsum</h1>
        <div class="infoNoticeParagraphClass">
          <p style="color: lightgreen;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore possimus ipsam iure repellendus. Odit sit eveniet laboriosam dolores volupt</p>
          <br>
          <p class="infoNoticeParagraphBugreportClass">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat sit, beatae, a neque dolorum temporibus! Corporis aliquam obcaecati rerum praesentium ducimus sequi consectetur, consequuntur, error deserunt ea quos autem similique, sapiente ratione nostrum? Magnam quos obcaecati error rerum ipsa rem itaque ipsam at, natus dicta facilis. Odit provident</p>
        </div>

        <h2 class="info_blog_headingClass">Lorem</h2>
        <div class="infoBlogParagraphClass">
          <h3>Lorem ipsum dolor sit amet, elit. Ab</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi placeat perspiciatis magnam, atque voluptatibus veritatis. Velit inventore doloribus minus, nisi incidunt eum ea beatae possimus, enim ipsam earum laborum nostrum</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, commodi magnam sequi, sed, velit quos quasi rerum numquam animi nam laboriosam. Voluptas</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic similique incidunt quas autem atque, voluptatem quaerat illum possimus vitae nulla. Aliquam ea at iusto aut odit necessitatibus ex exercitationem quae quasi sunt laudantium, ratione voluptatem optio commodi quisquam sequi, molestiae in, vel eum quod eveniet laboriosam tenetur.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum voluptates libero totam placeat optio nemo, quos voluptate velit ullam possimusa?</p>
        </div>
      </div>
    </div>

在调整浏览器窗口大小之前，css无法在Safari上正确呈现

0 个答案: