我的网页似乎可以在某些平台上运行，而不能在其他平台上运行，css没有得到应用，这是为什么？
[英]My webpage seems to work on certain platforms and not on others, the css doesn't get applied, why is this?
问题描述
这是我网页https://taniaswebpages.com/的链接，特别是我目前正在使用的网站5-降雪，该网页仅适用于Iphone6s上的Safari，不适用于Mac Chrome /苹果浏览器。 但是对于其他人来说却可行...为什么根据平台或用户的类型对其进行更改？
HTML / CSS：
body.mainpage2 { margin: 0; padding: 0; font-family: lato; background-color: #e74c3c; } .color { margin-top: 350px; text-align: center; } #hex { display: block; color: white; font-size: 40px; text-transform: uppercase; margin: 15px; letter-spacing: 0.1em; } .color button { background: none; outline: none; color: white; border: 2px solid white; cursor: pointer; font-size: 22px; border-radius: 5px; box-shadow: 5px 6px 30px 5px #fff; width: 200px; } body.mainpage3 { background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(221, 106, 95, 0.81)); margin: 0; padding: 2em 2em 4em; font-family: Lato; font-size: 16.5px; line-height: 24px; float; align-content: flex-start; display: block; } input[type=button] { width: 8%; border: none; padding: 8px 8px; cursor: pointer; color: palevioletred; } .image1 { position: relative; right: -400px; bottom: 600px; animation: shake 0.9s; animation-iteration-count: infinite; } .image2 { position: relative; right: -100px; bottom: 200px; animation: shake 0.9s; animation-iteration-count: infinite; } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } body.mainpage4 { margin: 0; padding: 0; background-color: darkseagreen; } .container1 { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; } .container1 span { text-transform: uppercase; display: block; } .Words1 { color: forestgreen; font-family: monospace; font-size: 60px; font-weight: 700; letter-spacing: 6px; margin-bottom: 4px; position: relative; } .Words2 { color: red; font-family: cursive; font-size: 40px; font-weight: 750; letter-spacing: 2px; animation: blinkingText 1s linear infinite; } @keyframes blinkingText { 0% { color: #f00; } 49% { color: transparent; } 50% { color: transparent; } 99% { color: transparent; } 100% { color: #f00; } } .image { background-size: cover; width: 100%; height: 1000px; position: relative; overflow: hidden; } .snow1 { background: url(https://taniaswebpages.com/snow.png); background-repeat: repeat; width: 100%; height: 2000px; position: absolute; top: 0; left: 0; animation: snowfall 3s infinite linear; } .snow2 { background: url(snow.png); background-repeat: repeat; width: 100%; height: 2000px; position: absolute; top: 0; left: 0; animation: snowfall 8s infinite linear; } @keyframes snowfall { 0% { background-position: 0px 0px } 100% { background-position: 100px 650px } } @keyframes snowfallSecond { 0% { background-position: 0px -100px } 100% { background-position: 0px 650px } }
<!DOCTYPE html> <html> <head> <link href="taniaWebsite2.css" type=text/css rel=Stylesheet> </head> <body class="mainpage4"> <div class="container1"> <span class="Words1">Merry Christmas</span> <span class="Words2"> and Happy Holidays!</span> </div> <div class="image"> <div class="snow1"></div> <div class="snow2"></div> </div> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2018-12-21 01:00:37
尝试改变
<link href="taniaWebsite2.css" type=text/css rel=Stylesheet>
至
<link href="taniaWebsite2.css" type="text/css" rel="stylesheet">
用引号引起来的属性值和所有小写字母。
为什么不应用CSS转换？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.