Question

我正在为我的客户创建一个网站。网站在Chrome，Firefox，Microsoft Edge和Even Internet Explorer中运行良好：P。但我不知道为什么这个网站在Safari中不起作用。这是我的代码： - HTML

<html>
<head>
    <title>Welcome to Siyaram Developers</title>
</head>
<body>
<div id="overlay"></div>
<div id="background"></div>
<div id="mainContainer">
    <div id="logo"><img src="#" width="150px" height="50px" alt="siyaram developers"/></div>
    <div id="navlinks">
        <div id="menuContainer">
            <a href="#" onclick="showContent('home')">Home</a>
            <a href="#" onclick="showContent('about-us')">About-Us</a>
            <a href="#;" onclick="showContent('projects')">Our Projects</a>
            <a href="#" onclick="showContent('vision')">Vision</a>
            <a href="#contactForm" onclick="showContent('contactForm')">Contact-Us</a>
            <a href="#login" onclick="showContent('login')">Members</a>
        </div>
    </div>
    <div id="middle">
        <div id="home">
            Welcome to the Siyaram Developers.
        </div>
        <div id="about-us">
            <h3>About Us</h3>
<p style="float: left;">
    <img src="img/a.jpg" width="250px" height="250px" alt="Sunny Bhadana" title="Sunny Bhadana"/>
</p>
<p>
    <script>
        for(i=0; i<10; i++){
            document.write("This is Some Dummy Text. This text is just for testing this site. And it's working Great.");
        }
    </script>
</p>        </div>
        <div id="vision">
            <img src="img/vision.jpg" width="100%" height="auto" alt="Vision" title="Vision">
<h3>Vision</h3>
<p>Our vision is to deliver positive, engaging and memorable experiences to our patrons and partners and
    continuously strive for innovation in product design and processes with integrity and transparency.</p>        </div>
        <div id="projects">
            <img src="img/company.jpg" width="100%" height="auto" alt="Project" title="Project">
<h3>Our Projects</h3>
<p>Our Project list here;---</p>        </div>
        <div id="contactForm">
        <img src="img/contact.jpg" width="100%" alt="Contact-Us">
<h3>Contact-Us</h3>
<br />
<b>Notice</b>:  Undefined variable: status in <b>C:\xampp\htdocs\siyaramdevelopers\includes\contact.php</b> on line <b>3</b><br />
<form name="contact-form" action="index.php" method="post" onsubmit="validate()">
    <input type="text" name="name" placeholder="Your Name"/><br/>
    <input type="number" name="number" placeholder="Your Mobile Number"/><br/>
    <input type="email" name="email" placeholder="Your E-mail Address"/><br/>
    <textarea name="message" placeholder="Your Suggestion/Questions" cols="10" rows="5"></textarea><br/>
    <input type="submit" value="Submit">
</form>        </div>
        <div id="login">

<table width="100%">
    <tr>
        <td width="32%"><input type="button" id="log_in" onclick="show('log_in')" value="Log-In"/></td>
        <td width="32%"><input type="button" onclick="show('sign_up')" id="sign_up" value="Sign-Up"/></td>
        <td width="32%"><input type="button" onclick="show('admin_login')" id="admin_login" value="Admin Login"/></td>
    </tr>
    <tr>
        <td valign="top" align="center">
            <form name="loginForm" onsubmit="return false;">
                <input type="email" id="login_username" placeholder="Email Address"><br/>
                <input type="password" id="login_password" placeholder="Password"><br/>
                <input type="button" onclick="validateData()" value="Login"><br/>
                <a href="#">Forgot Password?</a>
                <br/>
            </form>
        </td>
        <td valign="top" align="center">
            <form name="signupForm" onsubmit="return false">
                <input type="text" id="sign_name" placeholder="Your Name"/><br/>
                <input type="email" id="sign_email" placeholder="Your Email"/><br/>
                <input type="password" id="sign_password" placeholder="Password"/><br/>
                <input type="number" id="sign_mobile" placeholder="Mobile Number"/><br/>
                <input type="button" onclick="userSignUp()" value="Sign-Up" /><br/>
            </form>
        </td>
        <td valign="top" align="center">
            <form name="admin_login" onsubmit="return false">
                <input type="email" id="admin_username" placeholder="Email Address"><br/>
                <input type="password" id="admin_password" placeholder="Password"><br/>
                <input type="button" onclick="login_admin()" value="Login"><br/>
                <br/>
            </form>
        </td>
    </tr>
</table>



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

Java脚本代码

<script>
        function validateData() {
            var username = document.getElementById("login_username").value;
            var password = document.getElementById("login_password").value;
            var ajax = new XMLHttpRequest();
            ajax.open("POST", "login_test.php", true);
            ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            ajax.onreadystatechange = function () {
                if (ajax.readyState == 4 && ajax.status == 200) {
                    if(ajax.responseText == "login_undone"){
                        alert("Login Failed");
                    }else {
                        window.location.assign("user.php?username="+ajax.responseText);
                    }
                }
            }
        ajax.send("username="+username+"&password="+password);
        }

        function login_admin() {
            var admin_username = document.getElementById("admin_username").value;
            var admin_password = document.getElementById("admin_password").value;
            var ajax = new XMLHttpRequest();
            ajax.open("POST", "login_test.php", true);
            ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            ajax.onreadystatechange = function () {
                if (ajax.readyState == 4 && ajax.status == 200) {
                    if(ajax.responseText == "login_done") {
                        window.location.assign('admin/index.php');
                    }else {
                        alert('Sorry! Wrong Creditionals');
                    }
                }
            }
            ajax.send("admin_username="+admin_username+"&admin_password="+admin_password);
        }
        function userSignUp() {
            var username = document.getElementById("sign_name").value;
            var password = document.getElementById("sign_password").value;
            var ajax = new XMLHttpRequest();
            ajax.open("POST", "login_test.php", true);
            ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            ajax.onreadystatechange = function () {
                if (ajax.readyState == 4 && ajax.status == 200) {
                    alert(ajax.responseText);
                }
            }
            ajax.send("signup_username="+username+"&signup_password="+password);
        }

        function showContent(conId){
            var current = document.getElementById(conId);
            if(current == document.getElementById("about-us")) {
                //hide if any links are opened
                document.getElementById("vision").style.position = "fixed";
                document.getElementById("projects").style.position = "fixed";
                document.getElementById("contactForm").style.position = "fixed";
                document.getElementById("login").style.position = "fixed";
                document.getElementById("home").style.position = "fixed";
                document.getElementById("home").style.left = "100%";
                document.getElementById("login").style.left = "100%";
                document.getElementById("contactForm").style.left = "100%";
                document.getElementById("vision").style.left = "100%";
                document.getElementById("projects").style.left = "100%";
                document.getElementById("projects").style.transition = "0.5s";
                document.getElementById("vision").style.transition = "0.5s";
                document.getElementById("contactForm").style.transition = "0.5s";
                document.getElementById("login").style.transition = "0.5s";
                document.getElementById("home").style.transition = "0.5s";

                //show the current link which user clicks
                current.style.position = "absolute";
                current.style.left = "0";
                current.style.transition = "left 1s";
//                current.style.right = "50px";


            }else if(current == document.getElementById("vision")){
                //change absolute to fixed position
                document.getElementById("about-us").style.position = "fixed";
                document.getElementById("projects").style.position = "fixed";
                document.getElementById("contactForm").style.position = "fixed";
                document.getElementById("login").style.position = "fixed";
                document.getElementById("home").style.position = "fixed";
                document.getElementById("home").style.left = "100%";
                //make left align 100%
                document.getElementById("contactForm").style.left = "100%";
                document.getElementById("login").style.left = "100%";
                document.getElementById("about-us").style.left = "100%";
                document.getElementById("projects").style.left = "100%";
                //transition 0.5s
                document.getElementById("about-us").style.transition = "0.5s";
                document.getElementById("projects").style.transition = "0.5s";
                document.getElementById("contactForm").style.transition = "0.5s";
                document.getElementById("login").style.transition = "0.5s";
                document.getElementById("home").style.transition = "0.5s";

                current.style.position = "absolute";
                current.style.left = "0";
                current.style.transition = "left 1s";
//                current.style.left = "50px";
            }else if(current == document.getElementById("projects")){
                document.getElementById("about-us").style.position = "fixed";
                document.getElementById("about-us").style.position = "fixed";
                document.getElementById("contactForm").style.position = "fixed";
                document.getElementById("login").style.position = "fixed";
                document.getElementById("home").style.position = "fixed";
                document.getElementById("home").style.left = "100%";
                document.getElementById("login").style.left = "100%";
                document.getElementById("contactForm").style.left = "100%";
                document.getElementById("about-us").style.left = "100%";
                document.getElementById("vision").style.position = "fixed";
                document.getElementById("vision").style.left = "100%";
                document.getElementById("vision").style.transition = "0.5s";
                document.getElementById("about-us").style.transition = "0.5s";
                document.getElementById("contactForm").style.transition = "0.5s";
                document.getElementById("login").style.transition = "0.5s";
                document.getElementById("home").style.transition = "0.5s";

                //show contents
                current.style.position = "absolute";
                current.style.left = "50";
                current.style.transition = "left 1s";
            }else if(current == document.getElementById("contactForm")){
                document.getElementById("vision").style.position = "fixed";
                document.getElementById("projects").style.position = "fixed";
                document.getElementById("about-us").style.position = "fixed";
                document.getElementById("login").style.position = "fixed";
                document.getElementById("home").style.position = "fixed";
                document.getElementById("home").style.left = "100%";
                document.getElementById("login").style.left = "100%";
                document.getElementById("about-us").style.left = "100%";
                document.getElementById("vision").style.left = "100%";
                document.getElementById("projects").style.left = "100%";
                document.getElementById("projects").style.transition = "0.5s";
                document.getElementById("about-us").style.transition = "0.5s";
                document.getElementById("vision").style.transition = "0.5s";
                document.getElementById("login").style.transition = "0.5s";
                document.getElementById("home").style.transition = "0.5s";

                current.style.position = "absolute";
                current.style.left = "0";
                current.style.transition = "left 1s";
            }else if(current == document.getElementById("login")){
                document.getElementById("vision").style.position = "fixed";
                document.getElementById("projects").style.position = "fixed";
                document.getElementById("about-us").style.position = "fixed";
                document.getElementById("contactForm").style.position = "fixed";
                document.getElementById("home").style.position = "fixed";
                document.getElementById("home").style.left = "100%";
                document.getElementById("about-us").style.left = "100%";
                document.getElementById("vision").style.left = "100%";
                document.getElementById("projects").style.left = "100%";
                document.getElementById("contactForm").style.left = "100%";
                document.getElementById("projects").style.transition = "0.5s";
                document.getElementById("about-us").style.transition = "0.5s";
                document.getElementById("vision").style.transition = "0.5s";
                document.getElementById("contactForm").style.transition = "0.5s";
                document.getElementById("home").style.transition = "0.5s";

                current.style.position = "absolute";
                current.style.left = "0";
                current.style.transition = "left 1s";
            }else if(current == document.getElementById("home")){
                document.getElementById("vision").style.position = "fixed";
                document.getElementById("projects").style.position = "fixed";
                document.getElementById("about-us").style.position = "fixed";
                document.getElementById("contactForm").style.position = "fixed";
                document.getElementById("login").style.position = "fixed";
                document.getElementById("login").style.left = "100%";
                document.getElementById("about-us").style.left = "100%";
                document.getElementById("vision").style.left = "100%";
                document.getElementById("projects").style.left = "100%";
                document.getElementById("contactForm").style.left = "100%";
                document.getElementById("projects").style.transition = "0.5s";
                document.getElementById("about-us").style.transition = "0.5s";
                document.getElementById("vision").style.transition = "0.5s";
                document.getElementById("contactForm").style.transition = "0.5s";
                document.getElementById("login").style.transition = "0.5s";


                current.style.position = "absolute";
                current.style.left = "0";
                current.style.transition = "left 1s";
            }
        }
        function show(item) {
            if(item == 'admin_login'){
                alert('admin');
            }
            if(item == 'sign_up'){
                alert('sign_up');
            }
            if(item == 'log_in'){
                alert('member');
            }
        }
    </script>

CSS代码

<style>
    @font-face {
        font-family: myFont;
        src: url("http://localhost/siyaramdevelopers/fonts/lucida-sans-unicode.woff");
    }
    body {
        font-family: myFont;
        background-color: black;
        overflow-x: hidden;
    }
    #background {
        position: fixed;
        left:0;
        top:0;
        background: url("http://localhost/siyaramdevelopers/img/background.jpg");
        width: 100vw;
        height: 100vh;
        z-index: 10;
    }
    #overlay {
        position: fixed;
        left:0;
        top:0;
        width: 100vw;
        background-color: black;
        height: 100vh;
        z-index: 20;
        opacity: 0.6;
        filter:alpha(opacity=60);
    }
    #mainContainer {
        position: absolute;
        /*border:1px solid yellow;*/
        z-index: 30;
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }
    #navlinks {
        position: fixed;
        height: 120px;
        width:100vw;
        top: 0;
        left: 0;
        z-index: 40;
        background-color: rgba(12, 12, 12, 0.77);
    }
    #mainContainer > #navlinks > #menuContainer {
        width:600px;
        /*min-width: 600px;*/
        margin-top: 80px;
        position: absolute;
        right:10px;
        /*border:1px solid red;*/
        /*left: 50px;*/
    }
    @media screen and (max-width: 635px) {
        body {
            overflow-x: auto;
        }
        #navlinks {
            position: absolute;
            width: 700px;
        }
        #mainContainer > #navlinks > #menuContainer {
            left:10px;
        }
        #mainContainer > #navlinks > #menuContainer > a {
            margin-bottom: 10px;
        }

    }
    #mainContainer > #navlinks > #menuContainer > a {
        text-decoration: none;
        border: 2px solid white;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;;
        /*float: right;*/
        margin: 5px;
        padding: 5px;
        color: #fff;
        margin-top: 70px;
        outline: none;
    }
    #mainContainer > #navlinks > #menuContainer > a:hover {
        /*border: 2px solid white;*/
        background-color: rgba(28, 77, 233, 0.77);
        -webkit-transition: 0.5s;
        -moz-transition: 0.5s ;
        -ms-transition: 0.5s ;
        -o-transition: 0.5s ;
        transition: 0.5s ;
    }
    #logo {
        position: fixed;
        margin-left: 50px;
        width: 150px;
        /*border:2px solid blue;*/
    }
    #middle {
        margin-top: 150px;
        color: #fff;
    }
    #about-us, #vision, #projects, #contactForm, #login {
        position: fixed;
        width: 90%;
        /*top: 150px;*/
        /*right:100px;*/
        left:100%;
    }
    #middle > #about-us > p > img {
        margin-right: 20px;
    }
    #vision > img, #about-us > img, #contactForm > img, #projects > img {
        display: none;
    }
    /*Contact-us page style*/
    h3 {
        text-align: center;
    }
    #admin_login, #sign_up, #log_in {
        width:100%;
        height:40px;
        background: transparent;
        border: 2px solid white;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        color: #fff;
        outline:none;
        font-size: medium;
    }
    form[name=contact-form], form[name=loginForm], form[name=signupForm], form[name=admin_login]{
        /*border: 1px solid red;*/
        text-align: center;
    }
    form[name=contact-form] > input[type=text],
    form[name=contact-form] > input[type=number],
    form[name=contact-form] > input[type=email],
    form[name=loginForm] > input[type=email],
    form[name=loginForm] > input[type=password],
    form[name=loginForm] > input[type=button],
    form[name=signupForm] > input[type=text],
    form[name=signupForm] > input[type=email],
    form[name=signupForm] > input[type=password],
    form[name=signupForm] > input[type=number],
    form[name=signupForm] > input[type=button],
    form[name=admin_login] > input[type=email],
    form[name=admin_login] > input[type=password],
    form[name=admin_login] > input[type=button]
    {
        height: 40px;
        width:250px;
        margin: 10px;
        background: transparent;
        border: 2px solid white;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        color: #fff;
        outline:none;
        font-size: medium;
    }
    form[name=contact-form] > textarea {
        width:250px;
        background: transparent;
        border:2px solid white;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        color: #fff;
        font-size: medium;
        outline:none;
        margin-bottom: 20px;
        resize: none;
    }
    form[name=contact-form] > input[type=submit] {
        width:250px;
        height: 40px;
        border:2px solid white;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        font-size: medium;
        background: transparent;
        color: #fff;
        outline:none;
    }
    form[name=loginForm] > a {
        text-decoration: none;
        color: #fff;
    }
    #admin_login, #sign_up, #logForm {
        border: 2px solid white;
        background-color: transparent;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        font-size: medium;
        margin-top: 0;
        padding: 5px;
        color: #fff;
        outline: none;
    }
    form[name=admin_login], form[name=loginForm], form[name=signupForm] {
        display: inline;
    }
    form[name=admin_login] > #username, form[name=loginForm] > #username, form[name=signupForm] > #name {
        margin-top: 30px;

    }
</style>

这是Chrome的屏幕截图

这是在Safari中

Answer 1

最后我明白了:)。这需要一些时间，但现在我知道为什么我的代码在Safari上运行不正常。

我必须通过评论来逐一测试我的css代码。 OFFF！但是当我评论时

width:100vw;
height:100vh;

我得到了一些结果。然后我把它改成了

width:100%;
height:100%;

它有效！现在，我不知道在Safari中是否支持vh或vw，因为当我用％代替vh和vw我的代码正确运行时。

代码在chrome，firefox，mircrosoft边缘工作良好但不在safari中工作

1 个答案: