Question

任何人都知道为什么我的代码只在Chrome中正常显示，而不是在Firefox或ie中。主要问题是“罗马风格的专栏”。我是一个stoopid菜鸟，所以请尽可能简单地回答。有没有办法通过添加供应商前缀来解决这个问题？在我提出这个问题之前，堆栈溢出现在告诉我添加更多细节。所以更多的细节是，经过5个月的艰苦努力，试图学习如何编码。我准备退出，如果我不能解决这个问题。我希望在这里使用“问题”这个词是可以的，因为我已经知道问题的标题是不允许的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main3.css">

<title>Chemas Website</title>

</head>

<body>

<header class= "mh-container">
<div class= "h-container">

<h1>José María Penabad B.</h1>

<h2 id="Abo">Abogado</h2>

<h2 id="Att">Attorney at Law</h2>

<h2 id="San">San Jose, Costa Rica</h2>

<h2 id="email">jpenabad@racsa.co.cr</h2>

<div id="scales1">
<img src="imagesC/scales1.png" alt="scales of justice" height="140" width="140">
</div>

<div id="scales2">
<img src="imagesC/scales2.png" alt="scales of justice" height="140" width="140">
</div>

<div id="flag1">
<img class="f1radius" src="imagesC/flag1.png" alt="flag" height="40" width="70">
</div>

<div id="flag2">
<img class="f2radius" src="imagesC/flag2.png" alt="flag" height="40" width="70">
</div>

</div><!--close h-container-->

</header>


<!--Roman Columns-->
<div class="content"> 

<div id="col_topleft">
<img src="imagesC/col_topleft.png" alt="column" height="420" width="60">
</div>

<div id="col_topright">
<img src="imagesC/col_topright.png" alt="column" height="420" width="60">
</div>

<div id="col_bottleft">
<img src="imagesC/col_bottleft.png" alt="column" height="596" width="60">
</div>

<div id="col_bottright">
<img src="imagesC/col_bottright.png" alt="column" height="596" width="60">
</div>

<div id="scroll1">
<img  src="imagesC/scroll1.png" alt="scroll" height="80" width="700">
</div>

<div id="scroll2">
<img class="radius" src="imagesC/scroll2.png" alt="scroll" height="80" width="385">
</div>

<h3 class=toph3>Please Allow Me To Introduce Myself.</br>I'm a man of wealth and taste !</h3>

<p class="p1and2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, inventore, natus obcaecati debitis facilis quos ipsum libero quidem voluptatum tenetur laboriosam perspiciatis! Unde optio aliquid cum alias similique nobis cupiditate.
Temporibus, itaque, nobis, quaerat omnis amet ipsam provident sed ea incidunt minus consectetur corporis. Aliquam, excepturi ipsum similique ad tenetur quas labore ipsam cupiditate dolorem odit inventore laborum ea. Ut!
</p>

<p class="p1and2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, et saepe. Exercitationem, perferendis, nemo quo itaque unde vel consectetur est sequi recusandae eum cum assumenda non sapiente excepturi quas odio.
Sit, alias, ea quibusdam adipisci aperiam officia a aliquam dolorum id culpa animi distinctio nisi voluptates repellat vel? Debitis, praesentium recusandae iusto a quis ducimus libero voluptates porro aperiam earum.
</p>

<h3 class=both3>Beinvenido !</h3>


<p class="p3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, et dolorem cumque odit maxime unde sapiente nesciunt in quo vitae temporibus consequuntur voluptas dolor ipsum repellendus alias nam quia at?
Ratione, at, sed, quisquam, repellat reiciendis laudantium consequatur molestiae adipisci vero tempora ab saepe iste doloribus ad earum rem mollitia quidem soluta laborum magni! Excepturi enim qui odio ut rerum.
</p>

<p class="p4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, et dolorem cumque odit maxime unde sapiente nesciunt in quo vitae temporibus consequuntur voluptas dolor ipsum repellendus alias nam quia at?
Ratione, at, sed, quisquam, repellat reiciendis laudantium consequatur molestiae adipisci vero tempora ab saepe iste doloribus ad earum rem mollitia quidem soluta laborum magni! Excepturi enim qui odio ut rerum.
</p>

</div><!--close content div-->

<div>
<footer>

<p class="ftr"><strong>Copyright 2017 &copy; All Rights Reserved</strong></p>

<div>
<img src="imagesC/ALMA.png" alt="ALMA" height="22" width="220" class="center"/>
</div>

</footer>
</div>
</body>
</html>                   






*{margin:0 ;
  padding: 0;
}

.mh-container{max-width: 100%;
height: 250px;
margin: 0 auto;
/* border: 2px solid red;*/
background: #fff;
background: radial-gradient(#000000,#2a2a2a,#565656,#828282,#a7a7a7,#d7d7d7);
}            

h1 {text-align: center;
color:#c8e1e1;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
padding-top: 20px;
}

#Abo {text-align: center;
color: #c8e1e1;
padding-top: 0px;
}   

#Att {text-align: center;
padding-top: 5px;
color: #c8e1e1;
}

#San {text-align: center;
padding-top: 5px;
color: #c8e1e1;
}

#email {text-align: center;
padding-top: 5px;
color: #c8e1e1;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}

#scales1 {position: absolute;
top: 25px;
left: 120px;
border: 3px solid red;
height: 140px;
border-radius: 70px;
}

#scales2 {position: absolute;
top: 25px;
right: 120px;
border: 3px solid red;
height: 140px;
border-radius: 70px;
}

#flag1 {position: absolute;
top:0px;
}     

#flag2 {position: absolute;
top:0px;
right:0px;
}     

.f1radius {border-bottom-right-radius: 6px;}  
.f2radius {border-bottom-left-radius: 6px;}

body {background: linear-gradient(#000000,#2A2A2A,#565656,#828282,#A7A7A7);
}      

#scroll1 {position: absolute;
top: 250px;
left: 190px;
}

#scroll2 {position: absolute;
top: 1183px;
left: 350px;
}

.radius{border-top-left-radius: 8px;    
border-top-right-radius: 8px;}  

/*Roman Columns*/
#col_topleft {position: absolute;
top: 250px;
left: 25px;
 }       
#col_topright {position: absolute;
top: 250px;
right: 25px;
 }       
#col_bottleft {position: absolute;
top: 670px;
left: 25px;
 }       
#col_bottright {position: absolute;
top: 670px;
right: 25px;
 }       

.toph3 {text-align: center;
padding-top: 200px;
color: #c8e1e1 ;
font-family: sans-serif;}

.both3 {text-align: center;
padding-top: 60px;
color: #c8e1e1;
font-family: sans-serif;}

p{margin-left: 150px;
margin-right: 150px;
margin-top: 60px;
text-indent:20px;    
font-family: sans-serif;
}

.p1and2 {color: #c8e1e1;}

.p3 {color: #c8e1e1;}

.p4 {color: #c8e1e1;
margin-bottom: 80px;}

footer {width: 100%;
min-height: 80px;
background-color: black
}

.ftr {text-align: center;
padding: 20px;
color: #c8e1e1;
}     

img.center{display: block;
margin-left: auto;
margin-right: auto;
padding: 10px;
}

Answer 1

所以我将代码移到了样式标记内并更改了一些图像文件，因为我显然无法看到你引用的那些。

代码如下，以及chrome，即firefox的截图。

对于列而言，似乎所有表现都相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="main3.css">

    <title>Chemas Website</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .mh-container {
            max-width: 100%;
            height: 250px;
            margin: 0 auto;
            /* border: 2px solid red;*/
            background: #fff;
            background: radial-gradient(#000000,#2a2a2a,#565656,#828282,#a7a7a7,#d7d7d7);
        }

        h1 {
            text-align: center;
            color: #c8e1e1;
            text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
            padding-top: 20px;
        }

        #Abo {
            text-align: center;
            color: #c8e1e1;
            padding-top: 0px;
        }

        #Att {
            text-align: center;
            padding-top: 5px;
            color: #c8e1e1;
        }

        #San {
            text-align: center;
            padding-top: 5px;
            color: #c8e1e1;
        }

        #email {
            text-align: center;
            padding-top: 5px;
            color: #c8e1e1;
            text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
        }

        #scales1 {
            position: absolute;
            top: 25px;
            left: 120px;
            border: 3px solid red;
            height: 140px;
            border-radius: 70px;
        }

        #scales2 {
            position: absolute;
            top: 25px;
            right: 120px;
            border: 3px solid red;
            height: 140px;
            border-radius: 70px;
        }

        #flag1 {
            position: absolute;
            top: 0px;
        }

        #flag2 {
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .f1radius {
            border-bottom-right-radius: 6px;
        }

        .f2radius {
            border-bottom-left-radius: 6px;
        }

        body {
            background: linear-gradient(#000000,#2A2A2A,#565656,#828282,#A7A7A7);
        }

        #scroll1 {
            position: absolute;
            top: 250px;
            left: 190px;
        }

        #scroll2 {
            position: absolute;
            top: 1183px;
            left: 350px;
        }

        .radius {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        /*Roman Columns*/
        #col_topleft {
            position: absolute;
            top: 250px;
            left: 25px;
        }

        #col_topright {
            position: absolute;
            top: 250px;
            right: 25px;
        }

        #col_bottleft {
            position: absolute;
            top: 670px;
            left: 25px;
        }

        #col_bottright {
            position: absolute;
            top: 670px;
            right: 25px;
        }

        .toph3 {
            text-align: center;
            padding-top: 200px;
            color: #c8e1e1;
            font-family: sans-serif;
        }

        .both3 {
            text-align: center;
            padding-top: 60px;
            color: #c8e1e1;
            font-family: sans-serif;
        }

        p {
            margin-left: 150px;
            margin-right: 150px;
            margin-top: 60px;
            text-indent: 20px;
            font-family: sans-serif;
        }

        .p1and2 {
            color: #c8e1e1;
        }

        .p3 {
            color: #c8e1e1;
        }

        .p4 {
            color: #c8e1e1;
            margin-bottom: 80px;
        }

        footer {
            width: 100%;
            min-height: 80px;
            background-color: black;
        }

        .ftr {
            text-align: center;
            padding: 20px;
            color: #c8e1e1;
        }

        img.center {
            display: block;
            margin-left: auto;
            margin-right: auto;
            padding: 10px;
        }
    </style>
</head>

<body>

    <header class="mh-container">
        <div class="h-container">

            <h1>José María Penabad B.</h1>

            <h2 id="Abo">Abogado</h2>

            <h2 id="Att">Attorney at Law</h2>

            <h2 id="San">San Jose, Costa Rica</h2>

            <h2 id="email">jpenabad@racsa.co.cr</h2>

            <div id="scales1">
                <img src="imagesC/scales1.png" alt="scales of justice" height="140" width="140">
            </div>

            <div id="scales2">
                <img src="imagesC/scales2.png" alt="scales of justice" height="140" width="140">
            </div>

            <div id="flag1">
                <img class="f1radius" src="imagesC/flag1.png" alt="flag" height="40" width="70">
            </div>

            <div id="flag2">
                <img class="f2radius" src="imagesC/flag2.png" alt="flag" height="40" width="70">
            </div>

        </div><!--close h-container-->

    </header>


    <!--Roman Columns-->
    <div class="content">

        <div id="col_topleft">
            <img src="column.jpg" alt="column" height="420" width="60">
        </div>

        <div id="col_topright">
            <img src="column.jpg" alt="column" height="420" width="60">
        </div>

        <div id="col_bottleft">
            <img src="column.jpg" alt="column" height="596" width="60">
        </div>

        <div id="col_bottright">
            <img src="column.jpg" alt="column" height="596" width="60">
        </div>

        <div id="scroll1">
            <img src="imagesC/scroll1.png" alt="scroll" height="80" width="700">
        </div>

        <div id="scroll2">
            <img class="radius" src="imagesC/scroll2.png" alt="scroll" height="80" width="385">
        </div>

        <h3 class=toph3>Please Allow Me To Introduce Myself.</br>I'm a man of wealth and taste !</h3>

        <p class="p1and2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, inventore, natus obcaecati debitis facilis quos ipsum libero quidem voluptatum tenetur laboriosam perspiciatis! Unde optio aliquid cum alias similique nobis cupiditate.
            Temporibus, itaque, nobis, quaerat omnis amet ipsam provident sed ea incidunt minus consectetur corporis. Aliquam, excepturi ipsum similique ad tenetur quas labore ipsam cupiditate dolorem odit inventore laborum ea. Ut!
        </p>

        <p class="p1and2">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, et saepe. Exercitationem, perferendis, nemo quo itaque unde vel consectetur est sequi recusandae eum cum assumenda non sapiente excepturi quas odio.
            Sit, alias, ea quibusdam adipisci aperiam officia a aliquam dolorum id culpa animi distinctio nisi voluptates repellat vel? Debitis, praesentium recusandae iusto a quis ducimus libero voluptates porro aperiam earum.
        </p>

        <h3 class=both3>Beinvenido !</h3>


        <p class="p3">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, et dolorem cumque odit maxime unde sapiente nesciunt in quo vitae temporibus consequuntur voluptas dolor ipsum repellendus alias nam quia at?
            Ratione, at, sed, quisquam, repellat reiciendis laudantium consequatur molestiae adipisci vero tempora ab saepe iste doloribus ad earum rem mollitia quidem soluta laborum magni! Excepturi enim qui odio ut rerum.
        </p>

        <p class="p4">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, et dolorem cumque odit maxime unde sapiente nesciunt in quo vitae temporibus consequuntur voluptas dolor ipsum repellendus alias nam quia at?
            Ratione, at, sed, quisquam, repellat reiciendis laudantium consequatur molestiae adipisci vero tempora ab saepe iste doloribus ad earum rem mollitia quidem soluta laborum magni! Excepturi enim qui odio ut rerum.
        </p>

    </div><!--close content div-->

    <div>
        <footer>

            <p class="ftr"><strong>Copyright 2017 &copy; All Rights Reserved</strong></p>

            <div>
                <img src="imagesC/ALMA.png" alt="ALMA" height="22" width="220" class="center" />
            </div>

        </footer>
    </div>
</body>
</html>

<强>铬

<强>火狐

<强> IE

代码仅适用于Chrome

1 个答案: