Article Introduction: two stealth killers that destroy web layouts. |
In the process of creating a greengaint theme, I had a headache for a long time with two page layouts, and I never found out what was wrong, but then I solved the two problems by accident. In this article I will be the two damage to the Web layout of the invisible killer summed up, as a lesson for you to learn. Let me start by saying the first question.
First, use the Wp_head () statement carefully
The first problem I found was that I created a <div id= "wrapper" ></div> container under the <body> tag, putting everything on the page inside the container, But after creating the theme, I found the top distance <body> label of the wrapper container, which is about 25 pixels at the top of the browser. To confirm the presence of this gap, I added a 1 pixel border attribute to the <body> tag and wrapper container, and found that the problem was real. Then I carefully examined the CSS code to see if the hand mistakenly to the wrapper container added Margin-top properties, found that the code is all right, which makes people wonder, exactly where is the problem?
Some time ago to update the Greengaint theme, after finishing the head.php file header <meta> and <Link>, and so on, look at the page source code, suddenly found in the
Second, to ensure that the WordPress theme files of the same code
Another strange problem is the problem of the sidebar sinking, after creating the Greengaint theme, I found that the sidebar is normal in IE and Firefox, but in the Safari browser, the sidebar sinks down by dozens of pixels, in the browser compatibility test theme. The top and content area sections cannot remain on the same horizontal line. I didn't find any problems when I checked the code, which made me puzzled. This question has been shelved for a long time, and when I recently updated the Greengaint theme, it occurred to me whether the file encoding caused the problem. After opening the sidebar.php file with EditPlus, the code is found to be Utf-8+bom, and the other file is this encoding. Although I do not know what this code means, I still save sidebar.php and other subject files in order to UTF-8 format, and then after the safari test found all normal, another strange and headache problem solved.