Page renders differently on refresh within same browser

StackOverflow https://stackoverflow.com/questions/17500255

質問

I have an unusual problem that's driving me crazy! I haven't found a question posted yet that pertains to this exact issue.

I have a page on my site where certain elements render incorrectly on random page loads. Using chrome for example, the page will render normally but after a number of refreshes a basic ul in the header will shift down into the body. Sometimes a carousel won't appear, or a navigation block will slide to the next row. I have duplicated this behavior on Firefox as well.

I can't really give a snippet of code for anyone to look at because I have no idea where the issue is originating from. The page with the issue is the index of www.Calibrus.com. What's really amazing is that by using Chrome Dev Tools I can set display:none to the incorrect ul, then set display back to normal, and the ul renders where it should again. This suggests to me that the exact same html and css is somehow rendering differently (regardless of any scripts being used).

Also, this isn't an issue with the server. I have the same problem when running the code locally.

Does anyone have any idea whats going on here?

役に立ちましたか？

解決

I believe the issue is tied to floats and the slideshow javascript.

Whenever I triggered the layout bug on the live site, it was accompanied by the first slide not rendering correctly. This would cause <div id="r1"> to have a height of 0 which in turn seems to aggravate the afore mentioned float bug. There seems to be some tension between the <ul> which is floated and the <a> which is not.

This is the solution that worked for me:

In index.html add a class (or ID if you prefer) to allow yourself to target the link within the CSS. In this example I have simply given it a class of logo:

<a class="logo" href="index.html">
  <img src="images/Calibrus_logo.png" alt="logo" border="0">
</a>

Then, in your CSS:

// target the link using your chosen selector
.logo {
  display: block;
  float: left;
}

Once I added those rules, I could no longer replicate the rendering bug.

Side note:

I would recommend declaring your character encoding just after the opening <head> tag with <meta charset="utf-8">.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Calibrus</title>

Also, the border attribute for images has become obsolete. So rather than:

<img src="images/Calibrus_logo.png" alt="logo" border="0">

Simply target the <img> with CSS and declare:

.logo img {
  border: none;
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top