监视分辨率会改变网站的外观(Monitor resolution changes look of website)

监视分辨率会改变网站的外观(Monitor resolution changes look of website)

我有一个网站，我的分辨率看起来很好，甚至在更常见的1024 x 768.但是，在其他人的1024 x 768浏览器中，它太宽，网站甚至没有正确居中。

有没有办法让合适的宽度布局在分辨率改变时不会改变？

/* Body */ body { background: #535353; font-family: Arial; font-size: 12px; color: Black; } form { margin:0; padding:0; display: inline } * { margin: 0; padding: 0; } /* Header */ #header { margin-left: 100px; margin-right: 100px; overflow: hidden; } /* Logo */ #logo { background-color: White; } /* Menu */ #menu { margin-left: 100px; margin-right: 100px; margin-top: 0px; margin-bottom: 0px; padding: 0 0 0 0; text-align: left; background-color: #AB0000; font-size: 14px; color: White; font-weight: bold; } #menu a { font-size: 14px; color: White; font-weight: bold; } #menu a:hover { color: Yellow; } /* Spacer */ #spacer { background-color: #8C8C8C; } /* Sidebar */ #sidebar { margin-left: 100px; margin-right: 100px; padding-left: 10px; font-weight: bold; text-align: left; background: url(Images/leftborder.jpg) repeat-x left top; background-color: #C2C2C2; } #sidebar p { color: Black; font-weight: normal; font-size: 11px; } #sidebar a{ color: Black; font-weight: normal; font-size: 11px; } /* Quick Links */ #quicklinks a{ color: White; font-size: 12px; font-weight: bold; text-decoration:none } /* Content */ #content { margin-left: 200px; margin-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #C2C2C2; } #content p { font-size: 12px; } #content a{ color: Black; font-weight: bold; } /* Gallery */ #gallerylinks{ border-color:Black; } /* Footer Space */ #footerspace { background-color: #AB0000; } /* Footer */ #footer { width: 891px; height: 70px; margin-left: 100px; margin-right: 100px; margin-top: 0px; margin-bottom: 0px; padding: 0 0 0 0; text-align: center; background-color: #C2C2C2; font-weight: bold; color: Black; } #footer a { font-weight: bold; color: Black; } #footer a:hover { color: Yellow; }

I have a website that looks fine in my resolution and even in the more common 1024 x 768. Yet, in someone else's browser in 1024 x 768, it's too wide and the website doesn't even center correctly.

Is there a way to have a proper width layout that doesn't change when the resolution is changed?

/* Body */ body { background: #535353; font-family: Arial; font-size: 12px; color: Black; } form { margin:0; padding:0; display: inline } * { margin: 0; padding: 0; } /* Header */ #header { margin-left: 100px; margin-right: 100px; overflow: hidden; } /* Logo */ #logo { background-color: White; } /* Menu */ #menu { margin-left: 100px; margin-right: 100px; margin-top: 0px; margin-bottom: 0px; padding: 0 0 0 0; text-align: left; background-color: #AB0000; font-size: 14px; color: White; font-weight: bold; } #menu a { font-size: 14px; color: White; font-weight: bold; } #menu a:hover { color: Yellow; } /* Spacer */ #spacer { background-color: #8C8C8C; } /* Sidebar */ #sidebar { margin-left: 100px; margin-right: 100px; padding-left: 10px; font-weight: bold; text-align: left; background: url(Images/leftborder.jpg) repeat-x left top; background-color: #C2C2C2; } #sidebar p { color: Black; font-weight: normal; font-size: 11px; } #sidebar a{ color: Black; font-weight: normal; font-size: 11px; } /* Quick Links */ #quicklinks a{ color: White; font-size: 12px; font-weight: bold; text-decoration:none } /* Content */ #content { margin-left: 200px; margin-top: 10px; padding-left: 10px; padding-right: 10px; background-color: #C2C2C2; } #content p { font-size: 12px; } #content a{ color: Black; font-weight: bold; } /* Gallery */ #gallerylinks{ border-color:Black; } /* Footer Space */ #footerspace { background-color: #AB0000; } /* Footer */ #footer { width: 891px; height: 70px; margin-left: 100px; margin-right: 100px; margin-top: 0px; margin-bottom: 0px; padding: 0 0 0 0; text-align: center; background-color: #C2C2C2; font-weight: bold; color: Black; } #footer a { font-weight: bold; color: Black; } #footer a:hover { color: Yellow; }

最满意答案

如果您不希望宽度随分辨率/浏览器大小而变化，则在CSS中使用绝对宽度而不是百分比（860px而不是90％）。

但是，如果它在某些浏览器中看起来不同，可能是因为它们的字体和字体大小不同。

If you don't want the width to change with resolution/browser size, then use absolute widths in your CSS as opposed to percentages (860px as opposed to 90%).

However if it looks different in someone elses browser, it could be because of their font and font size being different.