Html 如何修复浏览器中按CTRL键时3个浮动元素的损坏_Html_Css

Html 如何修复浏览器中按CTRL键时3个浮动元素的损坏

html css

Html 如何修复浏览器中按CTRL键时3个浮动元素的损坏,html,css,Html,Css,我的div#blue#团队、.vs#img、#red#团队中有3个浮动元素，每次我尝试按ctrl键时，它都会破坏我的设计。如何修复 -------------------HTML代码：------------------- <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Battle Game</title>

我的div#blue#团队、.vs#img、#red#团队中有3个浮动元素，每次我尝试按ctrl键时，它都会破坏我的设计。如何修复

-------------------HTML代码：-------------------

    <!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Battle Game</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="http://code.jquery.com/jquery-1.8.1.js"></script>
</head>
<body>
<div id="container">
    <div id="warriors">
        <form id="blue_team">
            <p>
                <label class="team">Green Team</label>
            </p>
            <p>
                <a href="#"><img src="resources/naruto.png" alt=""></a>
                <a href="#"><img src="resources/sasuke.png" alt=""></a>
                <a href="#"><img src="resources/sakura.png" alt=""></a>
            </p>
            <p>
                <label>Name:</label>
                    <input type="text" readonly="readonly">
                <label>Type:</label>
                    <input type="text" readonly="readonly">
            </p>
        </form>

            <img class="vs_img" src="resources/vs.png" alt="">

        <form id="red_team">
            <p>
                <label class="team">Red Team</label>
            </p>
            <p>
                <a href="#"><img src="resources/itachi.png" alt=""></a>
                <a href="#"><img src="resources/tobi.png" alt=""></a>
                <a href="#"><img src="resources/hidan.png" alt=""></a>
            </p>
            <p>
                <label>Name:</label>
                    <input type="text" readonly="readonly">
                <label>Type:</label>
                    <input type="text" readonly="readonly">
            </p>
        </form>
        <div class="clearfloats">
            <p>
                <input type="button" value="Start Battle">
            </p>
        </div>
    </div>
</div>
</body>
</html>

 div#container {
    background-color:#151614;
    width:800px;
    margin:0 auto;
    padding-top:8px;
    padding-bottom:8px;
}
div#warriors {
    border:1px solid #ff3534;
    width:700px;
    margin:0 auto;
    padding:8px;
}
form {
    border:1px solid #ff3534;
    width:264px;
    height:190px;
}
form#blue_team {
    float:left;
    margin-right:8px;
    margin-bottom:8px;
}
.vs_img {
    border:1px solid #ff3534;
    width:150px;
    height:190px;
    float:left; 
    margin-right:8px;
}
form#red_team {
    float:left;
    margin-bottom:8px;
}
.clearfloats {
    clear:both;
    border:1px solid #ff3534;
}
.clearfloats p {
    margin-bottom:8px;
}
p {
    width:220px;
    margin:0 auto;
    margin-top:8px;
    text-align:center;
}
label {
    display:inline-block;
    width:55px;
    text-align:right;
    color:#ff3534;
}
.team {
    border:1px solid #ff3534;
    width:150px;
    padding:8px;
    text-align:center;
}
input[type=text] {
    width:110px;
    margin-bottom:8px;
}
input[type=button] {
    width:150px;
    cursor:pointer;
}

按下ctrl-之前的屏幕截图：

之后：

如您所说，未发现任何问题。请查看此内容。您使用的任何脚本都是jquery实用程序？任何可在live中查看问题的链接…？在正常情况下，CNTRL键不会对您的页面产生任何影响。但是，您是否正在运行向键添加宏的程序？看起来你可能是一个游戏玩家，而这正是游戏玩家可能使用的东西。尝试另一台计算机，您不太可能看到相同的行为。