Question

我在这里有一些html可以在Firefox上正常使用，但是当我在Chrome上测试它们时，那些不包含div的工作正常，但其他页面完全被拆解了！例如，这是登录代码：

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>login</title>
    <meta name="author" content="lenovo" />
    <style>
    .div {
        position:absolute;
        top:"30px";
        border:1px solid #a1a1a1;
        padding:10px 40px; 
        background:white;
        width:300px;
        height:350px;
        border-radius:2px;
     }
</style>
</head>
<body>
<div style="left: 890px">
<p style="font-size: 27px; position: relative; left: -10px"> <font face="century gothic"> <b>Sign In</b> </font></p>
<p style="font-size: 16px; position: relative; left: -10px"><font face="century gothic"> <b>Email</b></font> </p>
<form>
    <input type="text"; name="email"; style="width: 300px; background-color: white" class="left"/>
</form>
<br />
<p style="font-size: 16px; position: relative; left: -10px"><font face="century gothic"> <b>Password</b></font> </p>
<form>
    <input type="text"; name="Password"; style="width: 300px; background-color: white" class="left"/>
    <br />
    <br />
    <br />

    <input type="checkbox"; class="" /> Remember me <br />

</form>
<br />


<a href="home.html"><button class="left" style="color: white; background-color: blue; width: 100px; height: 40px" type="button" ><b>Sign In</b></button></a>

<br />
</div>
</body>

Chrome： Chrome

Firefox： Firefox

Answer 1

您的目标是一个名为div的类而不是标记。删除前导点你应该没问题。

Answer 2

好的，基于你的截图，这就是我认为正在发生的事情。您正试图在表单上设置div样式。页面上必须有其他元素必须受到样式的影响，从而导致奇怪的行为。

试试这个 - 希望这可以解决您的问题。

像这样更新您的HTML：

<div class="myForm" style="left: 890px">

然后将您的CSS更新为：

.myForm
{
    position:absolute;
    top:"30px";
    border:1px solid #a1a1a1;
    padding:10px 40px; 
    background:white;
    width:300px;
    height:350px;
    border-radius:2px;
 }

基本上，我所做的就是为表单指定一个特定的类名，然后将CSS更改为该类名。这样，您就可以确定代码的目标是什么。

Chrome中的奇怪造型

2 个答案: