当我进入Chrome并且你知道开发者模式的东西，你得到设备宽度，我在css中遇到overflow: hidden元素的问题。宽度为1440px，其具有HiDPI的笔记本电脑。我的.login类有一个我不想要的溢出，有没有解决这个问题？这是我的代码：
HTML：
<!DOCTYPE html><script src="snazzy/scripts/home.reg/maIn.js"></script><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link rel="stylesheet" type="text/css" href="./snazzy/styles/home.reg/beta.css" /><link rel="stylesheet" type="text/css" href="./snazzy/styles/home.reg/media.css" /><title>Home • </title><script type="text/javascript">function myFunction(){location.reload();}</script><style type="text/css">.scrollers{z-index:1;height:5vh;overflow:hidden;position:relative;margin-top:5pt;margin-left:250pt;padding-800vh;width:;font-size:110%;margin-right:;}.scrollers p{z-index:-1;height:100%;width:100%;position:absolute;margin:0;text-align:center;white-space:nowrap;color:#000;padding-bottom:2pt;<!-- STARTING POS -->-moz-transform: translateX(100%);-webkit-transform: translateX(100%);transform: translateX(100%);<!-- ANIMATION -->-moz-animation: scrollers 15s linear infinite;-webkit-animation: scrollers 15s linear infinite;animation: scrollers 15s linear infinite;}@-moz-keyframes scrollers{0%{-moz-transform: translateX(100%);}100%{-moz-transform: translateX(-100%);}}@-webkit-keyframes scrollers {0%{-webkit-transform: translateX(100%);} 100%{-webkit-transform: translateX(-100%); }}@keyframes scrollers {0%{-moz-transform: translateX(100%);-webkit-transform: translateX(100%);transform: translateX(100%);} 100% {-moz-transform: translateX(-100%);-webkit-transform: translateX(-100%); transform: translateX(-100%);}}</style></head><body id="body"><!-- BETA VERSION --><div class="wrapper"><div class="main"><div class="headerTop" id="top"> <!-- <div class="sidebar"></div> <div class="logoTop"><a href="" title=""><img src="" title="Return To Home" alt="Failed To Load Image ):" /></a></div>--><div class="menuTop"><ul class="links"><li><a href="register.php" title="Coming Soon!" class="sUp" onclick="return false">Register</a></li><li><a href="" title="Site Home">Home</a></li><li><a href="" title="Contact Us">Contact</a></li><li><a href="" title=""></a></li></ul></div> <!-- <div class="scrollingText"><script type="text/javascript">document.write("<form name=\"tickform\">");document.write("<input type=\"text\" name=\"tickfield\" disabled=\"disabled\" class=\"scroll\" size=\"150\">");document.write("</form>");textticker();</script></div>-->
<div class="scrollers"><p>This Is A Beta Version! This Isn't 100% Bug Free So Please Feel Free To Contact Us Via The Contact Options Provided</p></div><!-- <div class="floatRight"><div class="searchWrapper"><form method="GET" action="index.php"><input type="search" placeholder="Search" name="q" /> <button type="submit" class="submit"><li>Search</li></button></form></div></div> --></div><div class="login" align="center" style="overflow:hidden;"><h3>Already A Member? Login Below:</h3><form method="GET" action="index.php"><input type="text" name="fname" placeholder="Display Name" /><br /><br /><input type="password" name="pass" placeholder="Password" /><br /><br /><button name="submit"><li>Login</li></button></form><!--
<div class="register">
<form method="POST" action="inex.php">
<input type="text" name="first_name" placeholder="Forename" class="inputs" /><br /><br />
<input type="text" name="last_name" placeholder="Surename" class="inputs" /><br /><br />
<input type="text" name="user_name" placeholder="Username" title="This is what people will know you by." class="inputs" /><br /><br />
<input type="password" name="pass_word" placeholder="Password (Choose a secure password!)" class="inputs"/><br /><br />
<input type="password" name="pass_confirm" placeholder="Confirm Password" class="inputs" /><br /><br />
<input type="email" name="e_mail" placeholder="Email" class="inputs" /><br /><br />
<input type="email" name="e_mail_confirm" placeholder="Confirm Email" class="inputs"/><br /><br />
<button name="submit" style="" class="buttonClick"><li>Register</li></button>
</form>
</div> -->
</div></div>
<div class="articles">
<div class="article-white">
<div class="image"><a href="" title=""><img src="./img/logo_big.png" title="iCodeUrSite" alt="iCodeUrSite.com" draggable="false" />
</a><p style="margin-top:-1%"><span style="font-weight:bold;font-size:20pt">Show Your Coding Skills Here!</span> Publish projects you have worked on or even write a blog with code or update your profile with code or edit your profile responsiveness on each device yourself! Click, Drag and Drop is a feature for people with no code experience</p>
</div>
<h1>Introduction</h1>
We are glad you are here! Welcome to a new Social Network designed for your comfort and own enjoyment. There is a changelog for Beta Version which you can view <a href="" title="" onclick="return false">here</a>. Code a blog and post it by using HTML, CSS any many other programming languages! Even customize your own profile by using HTML and CSS if you know how to code, which will be added in later versions. If you aren't experienced don't worry we'll add a feature to click and drap and drop elements to where you want them!
</div>
<div class="article-clear">
<h1>More In Depth . . . </h1>
This is a new Social Network on the web! What makes us unique is that not only we are <u>new</u> but we are also packed full of features that no other site has. Some features will not be included in the Beta. We are trying to get it as responsive as possible and we have kind of done that but not 100%. We're trying to get it compatible with every device and browser as well!
</div>
<div class="article-white">
<h1>How To Log In</h1>
You must be wondering how you suppose to log in if you can't register yet? Well, you must send a reigster application to me (Email Will Be In The Footer) and i will take in all your requested details and add you to the database. After that i send the details to your dedicated email you emailed me with, and BAM, you can now log in. Unfortunately you cannot register at the moment but it is still under construction! If you'd like to change your details at any time, you can also email a resetuest to do so.
</div>
</div>
<div class="form">
<h2>Submit A Request</h2>
<form method="POST" action="index.php">
<textarea rows="5" cols="50" placeholder="Enter Your Comment Here" class="tarea" spellcheck="false"></textarea><br /><br /><button name="submit" class="site-BTN"><li>Submit</li></button>
</form>
</div>
<div class="footer">
<div class=""><p align="center">Copyright © <?php echo Date('Y'); ?> | All Rights Reserved</p></div>
<div class="footer-Menu">
</div>
<div class="image" id="footer-Logo" draggable="false"><a href="" title=""><img src="./img/logo_big.png" title="iCodeUrSite" alt="iCodeUrSite.com" draggable="false" /></a>
</div>
</div></div></div>
<!-- BETA VERSION END --></body></html>
CSS（媒体查询）
@media screen and (max-width:360px) {
.headerTop,
.menuTop {
position: static;
top: 0;
z-index: 1;
clear: both;
float: left;
}
.headerTop {
width: 0;
transition: 1s all ease 0s;
-webkit-transition: 1s all ease 0s;
-moz-transition: 1s all ease 0s;
-o-transition: 1s all ease 0s;
}
.menuTop {
transition: 1s all ease 0s;
-webkit-transition: 1s all ease 0s;
-moz-transition: 1s all ease 0s;
-o-transition: 1s all ease 0s;
background: rgba(63, 127, 191, 0.77);
width: 100%;
z-index: ;
max-width: 360px;
min-width: 361px
}
.scrollers {
visibility: hidden;
}
.image img {
width: 350px;
height: 150px
}
.article-white,
.article-clear {
width: 360px;
max-width: 360px;
min-width: 354px;
}
.tarea {
width: 330px;
max-width: 335px;
min-width: 330px;
transition: 1s all ease 0s;
-webkit-transition: 1s all ease 0s;
-moz-transition: 1s all ease 0s;
-o-transition: 1s all ease 0s;
}
}
@media screen and (max-width:600px) {}
@media screen and (max-width:320px) {}
@media screen and (max-width:510px) {}
@media screen and (max-width:384px) {
.headerTop,
.menuTop {
position: static;
top: 0;
z-index: 1;
clear: both;
float: left;
}
.headerTop {
width: 0;
transition: 1s all ease 0s;
-webkit-transition: 1s all ease 0s;
-moz-transition: 1s all ease 0s;
-o-transition: 1s all ease 0s;
}
.menuTop {
transition: 1s all ease 0s;
-webkit-transition: 1s all ease 0s;
-moz-transition: 1s all ease 0s;
-o-transition: 1s all ease 0s;
background: rgba(63, 127, 191, 0.77);
width: 100%;
z-index: ;
max-width: 384px;
min-width: 384px
}
.scrollers {
visibility: hidden;
}
.image img {
width: 350px;
height: 150px
}
.article-white,
.article-clear {
width: 384px;
max-width: 384px;
min-width: 354px;
}
.tarea {
width: 330px;
max-width: 335px;
min-width: 330px;
}
body {
overflow-x: hidden;
}
}
@media screen and (max-width:1440px) {
.login {
overflow: hidden;
position: relative;
max-width: 1430px;
height: 200px
}
}
纯CSS
html, body{cursor:url(bg.png);height: 100%;margin:0;padding:0;background:#fff;height:100%;/*url(bg2.png)center center fixed no-repeat; */-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}body:before{}.headerTop{height:27pt;width:100%;background:rgba(63, 127, 191, 0.77);box-shadow: 0 0 4vh rgba(0,0,0,0.64);top:0;position: fixed;z-index: 1}.logoTop{background:#888;height: 10vh;width:10vh;box-shadow: 0 0 4vh rgba(0,0,0,0.64);border:0;outline:0;}.logoTop img{height: 10vh;width:10vh;font-size: 2vh;border:0;outline:0;}.menuTop{transition: 1s all ease 0s;-webkit-transition: 1s all ease 0s;-moz-transition: 1s all ease 0s;-o-transition: 1s all ease 0s;background:;clear:both;float:left;margin-left:;box-shadow:;top:0;position:fixed;height:27pt;width:250pt;box-shadow:0 0 4vh rgba(0,0,0,0.64);-webkit-box-shadow:0 0 4vh rgba(0,0,0,0.64)}.links{margin-top:5pt;margin-left:-2%;margin-right:-98%;white-space:nowrap;clear:both;float:left;height:27pt;width:250pt;}.links li{list-style-type:none;display:inline;font-size:120%;padding:4pt;}.links li a{white-space:nowrap;color:#222;text-decoration:none;font-size:;font-family:Arial;}.floatRight{height:45pt;width:250pt;clear:both;float:right;box-shadow:;top:0;right:0;position:fixed;}.sUp:active{background:none}.sUp{background:none;padding:3px;border:1px solid #222;cursor:not-allowed}.sUp:hover{background:#222;color:#fff}.searchWrapper{margin-right:10pt;height:45pt;width:250pt;clear:both;float:right;top:0;right:0;position:fixed;margin-top:-4pt}.searchWrapper form{margin-top:1vh;margin-left:1vh;white-space:nowrap}input[type=search]{padding:3px;border:1px solid #555;width:200pt}.submit{background:none;border:1px solid #555;padding:3px;color:#555;cursor:pointer}.submit li{list-style-type:none;}.submit:hover{color:#fff;background:#555;}.sidebar{height:100%;width:100pt;background:rgba(63, 127, 191, 0.77);position:fixed;left:0;top:0;z-index:-1;resize:right;}.login{margin-top:40pt;overflow:hidden}.login h3{text-decoration:underline;color:rgba(63, 127, 191, 0.77)}.login form{}.login form input[type=text]{border:none;outline:none;padding:3pt;border:1pt solid #eee;border-radius:1pt}.login form input[type=password]{border:none;outline:none;padding:3pt;border:1pt solid #eee;border-radius:1pt}.login form button{border:none;outline:none;padding:3pt;background:none;border:1px solid #555;border-radius:1pt;cursor:pointer}.login form button li{list-style-type:none}.register{margin-top:15pt}.register form input[type=email]{border:none;outline:none;padding:3pt;border:1pt solid #eee;border-radius:1pt}.articles{box-shadow:0 0 4pt rgba(0,0,0,0.64) inset;background:rgba(10, 91, 255, 0.94);height:auto;width:100%;margin-top:20pt;padding:20pt 0 40pt 0;text-align: center}.article-white{background:;padding:20pt 0 40pt 0;min-width:100%}.article-clear{background:#fff;padding:20pt 0 40pt 0;box-shadow: ;min-width:100%}.wrapper{min-height:100%;}.main{overflow:auto;padding-bottom: ;}.footer{position: relative;margin-top:50pt;height:auto;clear:both;background:rgba(63, 127, 191, 0.77);padding:10pt 0 10pt 0;box-shadow: 0 0 4vh rgba(0,0,0,0.64);}.tarea{max-width:500px;border:1px solid rgba(10, 91, 255, 0.94);box-shadow: 0 0 4px rgba(39, 27, 212, 0.77)}.form{margin-top:20pt;text-align:center}.footer div p{}.footer-Menu{}.site-BTN{border:none;outline:none;background:none;border:1px solid rgba(10, 91, 255, 0.94);box-shadow:;padding:4pt;cursor: pointer}.site-BTN li{list-style-type:none}.image{}.image img{height:150px;padding:0;outline:0;border:0;transition: 1.5s all ease 0s;-webkit-transition: 1.5s all ease 0s;-moz-transition: 1.5s all ease 0s;-o-transition: 1.5s all ease 0s;}#footer-Logo{text-align: center}
.dev{margin-top:40pt;text-align:center}iframe{display:inline}
如果我的代码不易阅读，请道歉。 如果有人知道为什么会这样，那么如果你能帮助我的话会很棒。谢谢
答案 0 :(得分：0)
最好的办法是你的div.login没有受到宽度限制。尝试更改它，设置background-color并尝试直接在chromes开发人员工具中更改width 。
那应该是你的想法。