Question

我有一个奇怪的问题。我的CSS中的媒体查询规则触发了它们应该具有的特定宽度，但是如果我已经将浏览器窗口的大小调整为更小的宽度，那么将浏览器窗口扩展到它之外就会发生奇怪的事情。在刷新页面之前，事情看似正常。布局仅在页面刷新时以意外方式更改。当然，目标是使媒体查询正常运行，因为页面刷新不应更改任何规则。

我尝试使用裸骨重新创建问题：

//CSS media queries added to style tag here to prevent scrolling in other code blocks
var style = document.getElementsByTagName('style')[ 0 ];

style.innerHTML += 
'                                                                           \
  @media( max-width: 550px ) {                                              \
    body {                                                                  \
      background-color: #ddd;                                               \
      transition: 1s;                                                       \
    }                                                                       \
    main {                                                                  \
      height: auto;                                                         \
      text-align: center;                                                   \
    }                                                                       \
    .circle, .about-container {                                             \
      float: none;                                                          \
    }                                                                       \
    .circle {                                                               \
      display: inline-block;                                                \
      transform: translateY( 0 );                                           \
    }                                                                       \
    .about-container {                                                      \
      margin: 0 auto;                                                       \
      text-align: left;                                                     \
    }                                                                       \
  }                                                                         \
  @media( min-width: 551px ) {                                              \
    .circle {                                                               \
      transform: translateY( 0 );                                           \
    }                                                                       \
  }                                                                         \
';

/* ///////////////// ELEMENTS IN ORDER THEY APPEAR IN HTML ///////////////// */
* {
  box-sizing: border-box;
}
main {
  max-width: 600px;
  height: 11rem;
  margin: 0 auto;
  padding-top: 10px;
  font-size: 0.8rem;
  text-align: left;
}

.circle {
  width: 100px;
  height: 100px;
  background-color: #444;
  border-radius: 50%;
  float: left;
  top: calc( 50% - 10px );
}

.about-container {
  width: 75%;
  float: right;
}

body button {
  display: block;
  margin: 0 auto;
  padding: 8px;
}

<head>
  <style>
  
    /* ///////////// BASIC STYLES TO MAKE THIS SNIPPET LOOK BETTER ///////////// */
    @import url('https://necolas.github.io/normalize.css/latest/normalize.css');
    
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
    .vertically-center {
      position: relative;
      top: 50%;
      transform: translateY( -50% );
    }
  </style>
</head>
<body>
  <main class="clearfix">
    <div class="circle vertically-center"></div>
    <div class="about-container">
      <h3>About</h3>
      <p>
        This problem is wierd. When <strong>snippet is made full screen</strong> 
        and browser width is shrunk to less than <strong>550px</strong> <em>
        ( You will know you're at 550px because the background will darken )</em> 
        the layout changes - as expected. However when window is expanded beyond 
        550px again and <strong>Reload Frame</strong> is clicked the layout 
        unexpectedly updates itself. <br><br>What's going on?
      </p>
    </div>
  </main>
  <button onclick="location.reload()">Reload Frame</button>
</body>

虽然很奇怪但我觉得这有一个简单的解决方案，我希望？

修改：我在Chrome浏览器上看到了这些结果。将上传一个GIF，演示我在下面看到的内容。

Answer 1

看起来Chrome在同时浮动，定位和翻译的元素方面存在问题。同样，这是Chrome中的一个缺陷，而不是代码中的缺陷解决这个问题的一种方法是不使用定位，只使用平移来移动圆圈。

＆＃13;

public partial class Form1 : Form
{
    SerialPort mySerialPort = new SerialPort("COM3");
    OleDbConnection connection = new OleDbConnection();
    public Form1()
    {
        InitializeComponent();
    }

    private void textBox1_TextChanged(object sender, EventArgs e)
    {

    }

    private void textBox2_TextChanged(object sender, EventArgs e)
    {

    }

    private void button2_Click(object sender, EventArgs e)
    {
        mySerialPort.BaudRate = 9600;
        mySerialPort.Parity = Parity.None;
        mySerialPort.StopBits = StopBits.One;
        mySerialPort.DataBits = 8;
        mySerialPort.Handshake = Handshake.None;
        mySerialPort.RtsEnable = true;

        mySerialPort.DataReceived += new SerialDataReceivedEventHandler(DataReceivedHandler);

        if (mySerialPort.IsOpen == false)
        {
            mySerialPort.Open();
        }
    }

    public void DataReceivedHandler(object sender, SerialDataReceivedEventArgs e)
    {
        //gets data values from serial port
        SerialPort sp = (SerialPort)sender;
        string data = sp.ReadExisting();
        string time = GetTimestamp(DateTime.Now);

        int indata;
        long timeStamp;

        //parses strings to integers
        indata = Int32.Parse(data);
        timeStamp = Int64.Parse(time);


        //writes to console
        Console.WriteLine(indata);
        Console.WriteLine(timeStamp);

        //writes to text box
        textBox1.Text = data;

        Thread.Sleep(2000);
    }

    private void button3_Click(object sender, EventArgs e)
    {
        mySerialPort.Close();
    }

    private void label1_Click(object sender, EventArgs e)
    {

    }

    public static string GetTimestamp(DateTime value)
    {
        return value.ToString("yyyyMMddHHmmss");
    }

    private void label1_Click_1(object sender, EventArgs e)
    {

    }
}

＆＃13;

//CSS media queries added to style tag here to prevent scrolling in other code blocks

var style = document.getElementsByTagName('style')[ 0 ];

style.innerHTML += 
'                                                                           \
  @media( max-width: 550px ) {                                              \
    body {                                                                  \
      background-color: #ddd;                                               \
    }                                                                       \
    main {                                                                  \
      height: auto;                                                         \
      text-align: center;                                                   \
    }                                                                       \
    .circle, .about-container {                                             \
      float: none;                                                          \
    }                                                                       \
    .circle {                                                               \
      display: inline-block;                                                \
      transform: translateY(-40%); /* changed a bit to compensate */        \
    }                                                                       \
    .about-container {                                                      \
      margin: 0 auto;                                                       \
      text-align: left;                                                     \
    }                                                                       \
  }                                                                         \
';

＆＃13;

/* ///////////////// ELEMENTS IN ORDER THEY APPEAR IN HTML ///////////////// */

body {
  transition: 0.25s;
}

main {
  max-width: 600px;
  margin: 0 auto;
  height: 11rem;
  padding-top: 10px;
  font-size: 0.8rem;
  text-align: left;
}

.circle {
  height: 100px;
  width: 100px;
  background-color: #444;
  border-radius: 50%;
  float: left;
}
/* this was moved here */
.vertically-center {
  transform: translateY(40%);
}

.about-container {
  width: 75%;
  float: right;
}

body button {
  display: block;
  margin: 0 auto;
  padding: 8px;
}

＆＃13;

但正如其他人所表明的那样，还有更多解决方案。随便挑选！

Answer 2

解决方案：简单的解决方案是将margin-top:11%添加到div.vertically-center，然后在重新调整窗口大小后，圆圈会回到原始状态。：d

修复CSS问题有很多方法可以修复它甚至可以通过添加一些html元素和css代码或只是通过更改当前的css而不添加任何元素来修复。所以这取决于你哪一个跟随。

更好的使用方式 由于我检查了margin-top:11%混淆了Firefox风格，因此您可以使用以下两种方式将其仅应用于Chrome：

1）Chrome JavaScript解决方案：

if (navigator.appVersion.indexOf("Chrome/") != -1) {
document.getElementById("vertically-center").style.marginTop = "11%";
}

2）Chrome CSS解决方案：

/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
   .vertically-center { margin-top:11%; }
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
  .selector {-chrome-:only(; 
     property:value;
  );} 
}

Answer 3

更新代码试试这个运行代码

<div class="circlemain">
   <div class="circle vertically-center"></div>
</div>

   .circlemain {
        top: 50%;
        position: relative;
    }

@media( max-width: 550px ) {  
    .vertically-center {
     position: relative;
     transform: translateY( 0% ) !important;
     top: 50%;
 }

＆＃13;

//CSS media queries added to style tag here to prevent scrolling in other code blocks

    var style = document.getElementsByTagName('style')[ 0 ];

    style.innerHTML += 
    '                                                                           \
      @media( max-width: 550px ) {                                              \
        body {                                                                  \
          background-color: #ddd;                                               \
        }                                                                       \
        main {                                                                  \
          height: auto;                                                         \
          text-align: center;                                                   \
        }                                                                       \
        .circle, .about-container {                                             \
          float: none;                                                          \
        }                                                                       \
        .circle {                                                               \
          display: inline-block;                                                \
          transform: translateY( 0 );                                           \
        }                                                                       \
        .about-container {                                                      \
          margin: 0 auto;                                                       \
          text-align: left;                                                     \
        }                                                                       \
      }                                                                         \
      @media( min-width: 551px ) {                                              \
        .circle {                                                               \
          transform: translateY( 0 );                                           \
        }                                                                       \
      }                                                                         \
    ';

＆＃13;

/* ///////////////// ELEMENTS IN ORDER THEY APPEAR IN HTML ///////////////// */

    main {
      max-width: 600px;
      margin: 0 auto;
      height: 11rem;
      padding-top: 10px;
      font-size: 0.8rem;
      text-align: left;
    }
.circlemain {
    top: 50%;
    position: relative;
}
    .circle {
      height: 100px;
      width: 100px;
      background-color: #444;
      border-radius: 50%;
      float: left;
      top: calc( 50% - 10px );
    }

    .about-container {
      width: 75%;
      float: right;
    }

    body button {
      display: block;
      margin: 0 auto;
      padding: 8px;
    }
    @media( max-width: 550px ) {  
    .vertically-center {
        position: relative;
        transform: translateY( 0% ) !important;
        top: 50%;
    }
    
     }

＆＃13;

<head>
      <style>
        /* ///////////// BASIC STYLES TO MAKE THIS SNIPPET LOOK BETTER ///////////// */
        @import url('https://necolas.github.io/normalize.css/latest/normalize.css');
        * {
          box-sizing: border-box;
        }
        .clearfix:after {
          content: "";
          display: block;
          clear: both;
        }
        .vertically-center {
          position: relative;
          top: 50%;
          transform: translateY( -50% );
        }
      </style>
    </head>
    <body>
      <main class="clearfix">
        <div class="circlemain">
        <div class="circle vertically-center"></div>
</div>
        <div class="about-container">
          <h3>About</h3>
          <p>
            This problem is pretty wierd. When you
            <strong>make this snippet full screen</strong> and try shrinking the browser
            width to less than <strong>550px</strong> <em>( You will know you're at 550px
            because the background will darken )</em> the layout changes - Which is 
            expected. However when you expand the window beyond 550px again and click 
            <strong>Reload Frame</strong> the current layout unexpectedly updates
            itself. <br><br>What's going on?
          </p>
        </div>
      </main>
      <button onclick="location.reload()">Reload Frame</button>
    </body>

＆＃13;

Answer 4

所以感谢先前的答案，指出这是Chrome中的浏览器怪癖。然而，没有一种解决方案尽可能简单。我发现display: inline-block媒体查询下的关键问题是@media( max-width: 550px )。我将其删除，将其更改为display: block并添加了margin: 0 auto以重新定位该圈，因为它不再受其父级text-align: center规则的影响。这以最简单的方式解决了我的问题。这是片段：

＆＃13;

//CSS media queries added to style tag here to prevent scrolling in other code blocks
var style = document.getElementsByTagName('style')[ 0 ];

style.innerHTML += 
'                                                                           \
  @media( max-width: 550px ) {                                              \
    body {                                                                  \
      background-color: #ddd;                                               \
      transition: 1s;                                                       \
    }                                                                       \
    main {                                                                  \
      height: auto;                                                         \
      text-align: center;                                                   \
    }                                                                       \
    .circle, .about-container {                                             \
      float: none;                                                          \
    }                                                                       \
    .circle {                                                               \
      display: block; /* changed display: inline-block to display: block */ \
      margin: 0 auto; /* added this line to recenter the circle */          \
      transform: translateY( 0 );                                           \
    }                                                                       \
    .about-container {                                                      \
      margin: 0 auto;                                                       \
      text-align: left;                                                     \
    }                                                                       \
  }                                                                         \
  @media( min-width: 551px ) {                                              \
    .circle {                                                               \
      transform: translateY( 0 );                                           \
    }                                                                       \
  }                                                                         \
';

＆＃13;

/* ///////////////// ELEMENTS IN ORDER THEY APPEAR IN HTML ///////////////// */
* {
  box-sizing: border-box;
}
main {
  max-width: 600px;
  height: 11rem;
  margin: 0 auto;
  padding-top: 10px;
  font-size: 0.8rem;
  text-align: left;
}

.circle {
  width: 100px;
  height: 100px;
  background-color: #444;
  border-radius: 50%;
  float: left;
  top: calc( 50% - 10px );
}

.about-container {
  width: 75%;
  float: right;
}

body button {
  display: block;
  margin: 0 auto;
  padding: 8px;
}

＆＃13;

<head>
  <style>
  
    /* ///////////// BASIC STYLES TO MAKE THIS SNIPPET LOOK BETTER ///////////// */
    @import url('https://necolas.github.io/normalize.css/latest/normalize.css');
    
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
    .vertically-center {
      position: relative;
      top: 50%;
      transform: translateY( -50% );
    }
  </style>
</head>
<body>
  <main class="clearfix">
    <div class="circle vertically-center"></div>
    <div class="about-container">
      <h3>About</h3>
      <p>
        This problem is wierd. When <strong>snippet is made full screen</strong> 
        and browser width is shrunk to less than <strong>550px</strong> <em>
        ( You will know you're at 550px because the background will darken )</em> 
        the layout changes - as expected. However when window is expanded beyond 
        550px again and <strong>Reload Frame</strong> is clicked the layout 
        unexpectedly updates itself. <br><br>What's going on?
      </p>
    </div>
  </main>
  <button onclick="location.reload()">Reload Frame</button>
</body>

＆＃13;

简单媒体查询规则在页面刷新时更改

4 个答案: