CSS 適用於 chrome 但不適用於邊緣 40.15063.0.0 和 ie11

Question

我的簡單網頁代碼適用於 chrome，但它拒絕在 ie 和 ms edge 上讀取 css。 這可能是一個兼容性問題，但我不確定如何使它工作。 我的 HTML 是：

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://kit.fontawesome.com/849cf0a04d.js" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        
        <div class="main">
            <div class="logo">
                <img src="glasses2.png">
            <ul>
                <li class="active"><a href="Homepage.html">Home</a></li>
                <li><a href="Animation Page.html">Animation</a></li>
                <li><a href="Video Page.html">Video</a></li>
                <li><a href="Audio Page.html">Audio</a></li>
                <li><a href="Image Page.html">Image</a></li>
            </ul>
        </div>
        <div class="title">
            
        </div>
        <div class="search-box">
            <input class="search-txt" type="text" name="input" placeholder="Search..">
            <a class="search-btn" href="#">
            <i class="fas fa-search"></i>
                
            </a>
    </header>

</body>
</html>

CSS（這可能是無法按預期工作的原因）是這樣的：

*{
    margin: 0;
    padding: 0;
    font-family: century gothic;
}

header {
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../cyber.gif);
    height: 100vh;
    background-size: cover;
    background-position: center;
}

ul{
    position: absolute;
    top: 0.1%;
    right: 5%;
    list-style-type: none;
    margin-top:  25px;
}

ul li{
    display: inline-block;
}

ul li a{
    text-decoration: none;
    color: #fff;
    transform: translate(-50%, -50%);
    background: none;
    height: 25px;
    border-radius: 25px;
    padding: 10px;
    border: 1px solid transparent;
    transition: 0.6s ease;
}

ul li a:hover{
    background-color: #fff;
    color: #000;
}

ul li.active a{
    background-color: #fff;
    color: #000;
}

.logo img{
    float: left;
    width: 150px;
    height: auto;
}

.main{
    max-width: 1200px
    margin: auto;
}

.search-box{
    position: absolute;
    top: 5.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #2f3640;
    height: 25px;
    border-radius: 25px;
    padding: 10px;
}

.search-btn{
    color: #6C92C8;
    float: right;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #2f3640;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-txt{
    border: none;
    background: none;
    outline: none;
    float: left;
    padding: 0;
    color: white;
    font-size: 16px;
    line-height: 25px;
    width: 240px;
}

這是邊緣的樣子：

不知道我應該怎么做...

Answer 1

有一個問題是您錯過了可能導致它中斷的分號，但如果不是這樣，這可能會起作用：

*{
    margin: 0;
    padding: 0;
    font-family: century gothic;
}

header {
    background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,0.5)),to(rgba(0,0,0,0.5))), url(../cyber.gif);
    background-image: -o-linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../cyber.gif);
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../cyber.gif);
    height: 100vh;
    background-size: cover;
    background-position: center;
}

ul{
    position: absolute;
    top: 0.1%;
    right: 5%;
    list-style-type: none;
    margin-top:  25px;
}

ul li{
    display: inline-block;
}

ul li a{
    text-decoration: none;
    color: #fff;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background: none;
    height: 25px;
    border-radius: 25px;
    padding: 10px;
    border: 1px solid transparent;
    -webkit-transition: 0.6s ease;
    -o-transition: 0.6s ease;
    transition: 0.6s ease;
}

ul li a:hover{
    background-color: #fff;
    color: #000;
}

ul li.active a{
    background-color: #fff;
    color: #000;
}

.logo img{
    float: left;
    width: 150px;
    height: auto;
}

.main{
    max-width: 1200px;
    margin: auto;
}

.search-box{
    position: absolute;
    top: 5.5%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background: #2f3640;
    height: 25px;
    border-radius: 25px;
    padding: 10px;
}

.search-btn{
    color: #6C92C8;
    float: right;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #2f3640;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.search-txt{
    border: none;
    background: none;
    outline: none;
    float: left;
    padding: 0;
    color: white;
    font-size: 16px;
    line-height: 25px;
    width: 240px;
}

CSS 適用於 chrome 但不適用於邊緣 40.15063.0.0 和 ie11

問題描述

1 個解決方案

解決方案1
1 2020-06-22 01:01:00

CSS 適用於 chrome 但不適用於邊緣 40.15063.0.0 和 ie11

問題描述

1 個解決方案

解決方案1 1 2020-06-22 01:01:00

解決方案1
1 2020-06-22 01:01:00