html - IE および Firefox と互換性のない Web サイト

Question

みんな私は XHTML と CSS が初めてで、何らかの理由で私が構築している Web サイトはクロムとサファリではうまく見えますが、IE と Firefox では完全に不完全に見えます。上記のすべてのブラウザーと互換性を持たせるために推奨できるものはありますか?構文が不足していますか?www.alejandrochacon.com にもアクセスできます。

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"
    >

<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="indexone.css"/>
    <title>Welcome</title>
</head>
<body>

    <div id="whole">

        <header id= "top">
            <div id="title"><h1>Jorge Alejandro Chacon</h1></div>
             <div id="quote"><h6></br></br>"One machine can do the work of fifty ordinary men. No machine can do the work of one extraordinary man."
             <br/><br/>Elbert Hubbard</h6></div>
            <div id="pic">
                <a href="resume.pdf"><img src="images/one.jpg" title="See resume"width= 190px height=290px align="middle"/>See my resume</a>
            </div>

        </header>
        <nav id= "navigation">
            <ul>
                <div id="buttons">
                <li><a href="index.html" STYLE="TEXT-DECORATION: NONE" >Home</a>
                <li><a href="Edu.html" STYLE="TEXT-DECORATION: NONE">Educational Background</a>
                <li><a href="prof.html" STYLE="TEXT-DECORATION: NONE">Professional Background</a>
                <li><a href="projects.html" STYLE="TEXT-DECORATION: NONE">Projects</a>
                <li><a href="contact.html" STYLE="TEXT-DECORATION: NONE">Contact me</a></li>
                </div>
            </ul>

        </nav>
        <div id ="middle_div">
            <section id="mid_section">
                <div id="boxes">
                    <!-- <h1>
                        Leave your information here for a quick reponse:
                    </h1>
                    <br/>
                    <form id="myform" action="userinfo.php" method="post">
                        Name:<input type="text" value="name" name="name1">
                        Email:<input type="email" value="email" name="email">
                        Phone:<input type= "tel" value="phone(opt)" name="phone">
                        <button id="sub">Submit</button>
                    </form>
                    <span id="result"></span>
                 </div>
                <div id="boxes">-->
                    <h1>
                        Email me at...
                    </h1>
                    <p>For any comments or suggestions please contact me at the email shown below.</br></br>Thank you!</p>
                    <div id=email><a href="mailto:web@alejandrochacon.com"><img src="images/Email.jpg" title="email"width= 200px height=300px align="middle"/>
                    web@alejandrochacon.com</a></div>


                 </div>

            </section>
            <aside id="side_section">
                <h1>News</h1>
                <div id="newbox">

                    <h4><br/>Find me on Linkedin</h4>
                    <p><br/>Hi everyone, I just opened a linkedin profile and I want to make sure you check it out and add me as one of your connections.
                    <br/><br/>Thanks!
                    <a href="http://www.linkedin.com/in/jalejandrochacon/">Alejandro's linkedin</a></p>
                </div>
                <div id="newbox">

                    <h4><br/>Online tutorials</h4>
                    <p></br>For those of you who want to learn on your own, take a look at this awesome website to get free education.
                    <a href="http://thenewboston.org/tutorials.php">thenewboston.org</a></p>
                </div>
                <div id="newbox">

                    <h4><br/>Programming help</h4>
                    <p></br>If you have questions or need help in  any type of programming language, find quick answers here.
                    <a href="http://stackoverflow.com/">stackoverflow.com</a></p>
                </div>

            </aside>
        </div>
        <footer id="bottom">

           <ul>
                <div id="navFooter">
                <li><a href="index.html" STYLE="TEXT-DECORATION: NONE" >Home</a>
                <li><a href="Edu.html" STYLE="TEXT-DECORATION: NONE">Educational Background</a>
                <li><a href="prof.html" STYLE="TEXT-DECORATION: NONE">Professional Background</a>
                <li><a href="projects.html" STYLE="TEXT-DECORATION: NONE">Projects</a>
                <li><a href="contact.html" STYLE="TEXT-DECORATION: NONE">Contact me</a></li>
                </div>
            </ul>
           </br>
           Developed by Jorge Chacon 2013
        </footer>
    </div>
</body>
</html>

CSS

*{
    margin: 0px;
    padding: 0px;

}

h1{
    font: bold 35px tahoma;
    text-shadow: rgba(110,110,110,.8) 2px 2px 2px;
    width: 400px;
}
h4,h5{
    font-family: tahoma;
}
h6{

    width: 400px;
    padding: 30px;
    float: right;
}

header, section,footer,aside,nav{
    display: block;/*make sure is compatible with all browsers*/
}
body{
    width: 100%;
    display: -webkit-box;
    -webkit-box-pack: center;
    background-image:url(images/gray.jpg);
    background-repeat:no-repeat;
    background-size: cover;
}

#whole{

    max-width: 1200px;
    margin: 20px 0px;
    display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-flex: 1;
}
#top{
    background: -webkit-linear-gradient(top,#759600,#B2CC01);
    border: 4px solid white;
    margin: 5px;
    padding: 10px;
    -webkit-border-radius:5px;
    color: white;
    font-size: 40px;
    height: 360px;
    position: relative;

}

#navigation{
    text-align: center;
    -webkit-border-radius: 5px;
    background: white;
    margin: 5px;
    height: 40px;

}
#navigation li,a{

    display: inline-block;
    list-style: none;
    margin: auto;
    padding: 4px;
    font: bold 14px tahoma;
    color: #759600;
    -webkit-transition: color 1s;

}
a:hover {
    color:#1ec7e6;
}
#java{
    list-style: none;
}
#middle_div{
    display: -webkit-box;
    -webkit-box-orient: horizontal;
}

#mid_section{

    -webkit-border-radius: 5px;
    -webkit-box-flex: 1;
    padding: 10px;
    background: rgba(255, 255, 255, 0.2);
    height: auto;
    margin:5px;

}

#email, img{
    -webkit-border-radius:5px;

    }
#epic{
    padding-left: 100px;
}

#side_section{
    border: 1px solid #759600;
    -webkit-border-radius: 3px;
    width: 200px;
    background: #D3D3D3;
    margin: 5px;
    padding:20px;
    height: auto;

}
#bottom{
    text-align: center;
    padding: 10px;
    border-top: 2px solid #759600;
    color:white;
}
#boxes{


    border: 1px solid #759600;
    margin:20px;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: rgba(110,110,110,.6) 5px 5px 5px;
    padding: 20px;
    -webkit-box-flex: 1;
    background: #D3D3D3;
}

#pic{
    background: #D3D3D3;
    width: 17%;
    height: 86%;
    float: right;
    border:3px solid white;
    -webkit-box-shadow: rgba(110,110,110,.6) 7px 7px 7px;
    -webkit-border-radius: 5px;
    padding: 18px;
    -webkit-transition: -webkit-transform 2s, background 1s;


}

#pic:hover{
     -webkit-transform: scale(1.1, 1.1);
    background: #1ec7e6;


}
p{
    font-size: 18px;
    font-family: tahoma;
    margin: 10px;
    text-align: justify;


}
#title{
    display: inline;
    float: left;
}
#classes{
    font-size: 14px;
    margin-left:20px;
    font-family: tahoma;
}

img{
    display: block;
    width: 92%;
    margin-left: auto;
    margin-right: auto

}

iframe{
    display: block;
    margin-left: auto;
    margin-right: auto
}
#newbox{
    border-top: 1px;
    border-top-style: solid;
    border-top-color: black;
}
#pic a{
    color: black;
    text-align: center;
}

#navFooter li{
    display: inline-block;
    list-style: none;
    margin: auto;
    padding: 4px;
}

修正された CSS

*{
    margin: 0px;
    padding: 0px;

}

h1{
    font: bold 35px tahoma;
    text-shadow: rgba(110,110,110,.8) 2px 2px 2px;
    width: 400px;
}
h4,h5{
    font-family: tahoma;
}
h6{

    width: 400px;
    padding: 30px;
    float: right;
}

header, section,footer,aside,nav{
    display: block;/*make sure is compatible with all browsers*/
}
body{
    width: 100%;
    display: -webkit-box, -moz-box, -ms-box, -o-box, box;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-box-pack: center;
    -o-box-pack: center;
    box-pack: center;
    background-image:url(images/gray.jpg);
    background-repeat:no-repeat;
    background-size: cover;
}

#whole{

    max-width: 1200px;
    margin: 20px 0px;
    display: -webkit-box, -moz-box, -ms-box, -o-box, box;
    -webkit-box-orient:vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    -o-box-orient: vertical;
    box-orient: vertical;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
}
#top{
    background: -webkit-linear-gradient(top,#759600,#B2CC01) ;
    border: 4px solid white;
    margin: 5px;
    padding: 10px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    color: white;
    font-size: 40px;
    height: 360px;
    position: relative;

}

#navigation{
    text-align: center;
    -webkit-border-radius: 5px;
    -moz-border-radius:5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    background: white;
    margin: 5px;
    height: 40px;

}
#navigation li,a{

    display: inline-block;
    list-style: none;
    margin: auto;
    padding: 4px;
    font: bold 14px tahoma;
    color: #759600;
    -webkit-transition: color 1s;
    -moz-transition:5px;
    -ms-transition: 5px;
    -o-transition: 5px;
    transition: 5px;

}
a:hover {
    color:#1ec7e6;
}
#java{
    list-style: none;
}
#middle_div{
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
    -o-box-orient: horizontal;
    box-orient: horizontal;

}

#mid_section{

    -webkit-border-radius: 5px;
    -moz-border-radius:5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    -o-box-flex: 1;
    box-flex: 1;
    padding: 10px;
    background: rgba(255, 255, 255, 0.2);
    height: auto;
    margin:5px;

}

#email, img{
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    }
#epic{
    padding-left: 100px;
}

#side_section{
    border: 1px solid #759600;
    -webkit-border-radius: 3px;
    -moz-border-radius:3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    width: 200px;
    background: #D3D3D3;
    margin: 5px;
    padding:20px;
    height: auto;

}
#bottom{
    text-align: center;
    padding: 10px;
    border-top: 2px solid #759600;
    color:white;
}
#boxes{


    border: 1px solid #759600;
    margin:20px;
    -webkit-border-radius: 5px;
    -moz-border-radius:5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-box-shadow: rgba(110,110,110,.6) 5px 5px 5px;
    -moz-box-shadow: rgba(110,110,110,.6) 5px 5px 5px;
    -ms-box-shadow: rgba(110,110,110,.6) 5px 5px 5px;
    -o-box-shadow: rgba(110,110,110,.6) 5px 5px 5px;
    box-shadow: rgba(110,110,110,.6) 5px 5px 5px;
    padding: 20px;
    -webkit-box-flex: 1;
    background: #D3D3D3;
}

#pic{
    background: #D3D3D3;
    width: 17%;
    height: 86%;
    float: right;
    border:3px solid white;
    -webkit-box-shadow: rgba(110,110,110,.6) 7px 7px 7px;
    -moz-box-shadow: rgba(110,110,110,.6) 7px 7px 7px;
    -ms-box-shadow: rgba(110,110,110,.6) 5px 5px 5px;
    -o-box-shadow: rgba(110,110,110,.6) 5px 5px 5px;
    box-shadow: rgba(110,110,110,.6) 5px 5px 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius:5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    padding: 18px;
    -webkit-transition: -webkit-transform 2s, background 1s;
    -moz-transition: -webkit-transform 2s, background 1s;
    -ms-transition: -webkit-transform 2s, background 1s;
    -o-transition: -webkit-transform 2s, background 1s;
    transition: -webkit-transform 2s, background 1s;

}

#pic:hover{
     -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    background: #1ec7e6;


}
p{
    font-size: 18px;
    font-family: tahoma;
    margin: 10px;
    text-align: justify;


}
#title{
    display: inline;
    float: left;
}
#classes{
    font-size: 14px;
    margin-left:20px;
    font-family: tahoma;
}

img{
    display: block;
    width: 92%;
    margin-left: auto;
    margin-right: auto

}

iframe{
    display: block;
    margin-left: auto;
    margin-right: auto
}
#newbox{
    border-top: 1px;
    border-top-style: solid;
    border-top-color: black;
}
#pic a{
    color: black;
    text-align: center;
}

#navFooter li{
    display: inline-block;
    list-style: none;
    margin: auto;
    padding: 4px;
}

score 3 · Accepted Answer

-webkit- ベンダープレフィックスのみを使用しているためです。これらすべての css 値をコピーし、firefox の場合は -moz-、Internet Explorer の場合は -ms-、opera の場合は -o- を追加する必要があります。また、適切な対策として、プレフィックスを付けずに css のその行のコピーを含めます。

例：

body{
width: 100%;
display: box, -webkit-box, -moz-box, -ms-box, -o-box;
box-pack: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-box-pack: center;
-o-box-pack: center;
background-image:url(images/gray.jpg);
background-repeat:no-repeat;
background-size: cover;
}

score 0 · Accepted Answer

「機能していない」と考えるのはそれだけではありませんが、最初に css ファイルに同等の webkit を追加する必要があります (webkit はクロムのみを参照します。他の場所で機能させたい場合は、その「moz」と他の対応物があります。

html - IE および Firefox と互換性のない Web サイト

2 に答える 2

Related

Reference