放大或缩小时我的内容不正确

Question

everytime i try zooming in or out everything go out of place :/ , or trying to open the page in another browser than google chrome , i tried searching the internet but i didnt understand and i am new to html and css. 每次我尝试放大或缩小所有不适当的位置：/，或尝试在除google chrome之外的其他浏览器中打开页面时，我都尝试搜索互联网，但我不理解，我是html和css的新手。

Here is my html code and css code : 这是我的HTML代码和CSS代码：

 @charset "utf-8"; .header .bckground { } .header { height: 70px; width: auto; background-color: #440e62; min-width: 960px; } .header h1 { color: #FFFFFF; text-align: center; font-size: 30pt; padding-bottom: 10px; padding-top: 7px; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; margin-bottom: 5px; float: none; margin-top: 10px; } .nav { height: 620px; width: 250px; border-radius: 0; border: 4px solid #440E62; float: none; margin-top: 5px; } .nav h3 { color: #440E62; font-size: 36px; margin-bottom: auto; text-align: center; float: none; height: 565px; width: 163px; margin-top: auto; padding-top: auto; padding-bottom: auto; } .nav h2 { color: #440E62; font-size: 36pt; } .footer { width: auto; height: 70px; padding-top: 5px; margin-top: 5px; border: 5px none #440E62; background-color: #440E62; clear: both; float: none; min-width: 960px; } .bodyy h5 { float: right; clear: left; } .bodyy { width: 780px; height: 618px; float: right; clear: none; margin-top: 5px; margin-right: 600px; } .nav p { color: #440E62; font-size: 36px; text-align: center; width: 160px; height: 50px; background-size: 160px 70px; background-position: center center; float: none; background-origin: padding-box; padding-left: 20px; position: static; padding-right: 20px; clear: none; top: auto; display: list-item; padding-top: 30px; padding-bottom: 30px; margin-left: 40px; } body { min-height: 100px; } .bodyy p { font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-size: 24px; text-align: left; font-style: normal; font-weight: lighter; } .bodyy img { float: none; clear: none; } .bodyy .tagname { position: absolute; top: 500px; left: 1270px; color: #440E62; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-weight: bold; text-decoration: none; }

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <link href="p.css" rel="stylesheet" type="text/css"> </head> <body> <div> <div class="header"> <h1 align="justify">Pirates Asu</h1> </div> <div class="bodyy"> <h1>IT committee</h1> <p>The IT committe is the strongest committee in pirates ASU , they have the best members and they are going to rock this year</p> <img STYLE="position:absolute; TOP:100px; LEFT:1200px; WIDTH:400px; HEIGHT:400px" src="10603764_10203982859144113_8753444382621391138_n.jpg" width="480" height="480" alt=""/> <p class="tagname">IT Head : Kareem Ahmad</p> </div> <div class="nav"> <p>Home</p> <p>Commitees</p> <p>About us</p> <p>Timeline</p> </div> <div class="footer"> </div> </div> </body> </html>

Answer 1

The problem is obviously your css. 问题显然是您的CSS。 It is so hardcoded with pixels everywhere that things blow apart eventually. 它到处都有像素的硬编码，以至于最终一切破裂。 Even on my laptop screen with 1366*768 resolution, chrome can't open things properly at 100% zoom,. 即使在分辨率为1366 * 768的笔记本电脑屏幕上，Chrome也无法以100％缩放正确打开内容。 I had to zoom out to 75% to see it properly. 我必须缩小到75％才能正确看到它。

PS:will eventually post some css edits PS：最终将发布一些CSS编辑

html html

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <link href="p.css" rel="stylesheet" type="text/css"> </head> <body> <div> <div class="header"> <h1 align="justify">Pirates Asu</h1> </div> <div class="nav"> <p>Home</p> <p>Commitees</p> <p>About us</p> <p>Timeline</p> </div> <div class="bodyy"> <h1>IT committee</h1> <p>The IT committe is the strongest committee in pirates ASU , they have the best members and they are going to rock this year</p> <img STYLE="" src="10603764_10203982859144113_8753444382621391138_n.jpg" width="480" height="480" alt=""/> <p class="tagname">IT Head : Kareem Ahmad</p> </div> <p style="clear: both;"></p> <div class="footer"> </div> </div> </body> </html>

css 的CSS

 @charset "utf-8"; .header .bckground { } *{margin: 0;padding: 0;} .header { height: 70px; background-color: #440e62; min-width: 960px; } .header h1 { color: #FFFFFF; text-align: center; font-size: 30pt; padding-bottom: 10px; padding-top: 7px; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; margin-bottom: 5px; margin-top: 10px; } .nav { height: 100%; border: 4px solid #440E62; float: left; } .nav h3 { color: #440E62; font-size: 36px; text-align: center; } .nav h2 { color: #440E62; font-size: 36pt; } .footer { height: 70px; border: 5px none #440E62; background-color: #440E62; min-width: 960px; } .bodyy h5 { } .bodyy { margin-top: 5px; } .nav p { background-origin: padding-box; background-position: center center; background-size: 160px 70px; color: #440E62; display: list-item; font-size: 36px; height: 50px; margin-left: 40px; padding-bottom: 30px; padding-left: 20px; padding-right: 20px; padding-top: 30px; position: static; text-align: center; top: auto; width: 160px; } body { min-height: 100px; } .bodyy p { font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-size: 24px; text-align: left; font-style: normal; font-weight: lighter; } .bodyy img { float: right; } .bodyy .tagname { float:right; color: #440E62; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; font-weight: bold; text-decoration: none; }

Although this still is not very good, it still solved the problem. 尽管这还不是很好，但仍然可以解决问题。 The problem was that you'd placed width on many items in pixels. 问题在于您将width放置在许多像素上。 If you really want widhts, set it in percents. 如果您真的想要widhts，请将其设置为百分比。 Also, dont make position: absoulte a common habit. 另外，不要position: absoulte要养成习惯。 It only hurts in long run. 从长远来看，它只会带来伤害。 the float property is pretty useful and must be cleared once set. float属性非常有用，设置后必须清除。

放大或缩小时我的内容不正确

问题描述

1 个解决方案

解决方案1
0 2014-11-23 20:01:29

放大或缩小时我的内容不正确

问题描述

1 个解决方案

解决方案1 0 2014-11-23 20:01:29

解决方案1
0 2014-11-23 20:01:29