【发布时间】：2020-07-09 13:50:18
【问题描述】：
在创建快速网站后，我注意到我的 iPhone 和 Mac 上的 Safari 中的图像要么不显示，要么格式不正确。
例如，我希望在index.css 中的@keyframes animate 下的assets/images/showza 以设备宽度的 65% 显示，这适用于 Windows 10 的 Chrome，但在 Safari 上它实际上似乎膨胀到了 100% 以上.
我想我正在寻找我可能错过的任何 Safari 依赖项，我不习惯 Web 开发的差异。
body, html {
height: 100%;
margin: 0;
}
.container{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
animation: animate 16s ease-in-out infinite;
background-size: cover;
}
.outer{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background: rgba(0,0,0,0.15)
}
@keyframes animate{
0%,100%{
background-image: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png"), url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_1.JPG?raw=true");
height: 100%;
-webkit-appearance: textfield;
background-position: center;
background-repeat: no-repeat;
background-size: 65%, cover;
}
33%{
background-image: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png"), url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_2.JPG?raw=true");
}
66%{
background-image: url("https://raw.githubusercontent.com/showzadomain/showzatheband.github.io/master/assets/images/showza.png"), url("https://github.com/showzadomain/showzatheband.github.io/blob/master/assets/images/bg_3.jpg?raw=trueg");
}
}
.image {
border-radius: 100px;
}
.itemDiv {
height: 45px;
}
.item {
color: white;
font-family: Helvetica;
font-weight: bold;
font-style: normal;
font-size: 30px;
}
.menuItem {
color: white;
font-family: Helvetica;
font-weight: bold;
font-style: normal;
font-size: 40px;
}
.topnav {
overflow: hidden;
background-color: transparent;
}
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: black;
border-radius: 100px;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 1200px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 1200px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" lang="en">
<title>
showzatheband
</title>
<link rel='icon' href='favicon.ico' type='image/x-icon'>
<link href="index.css" rel="stylesheet" type="text/css"/>
<body class="body">
<div class="container">
<div class="outer">
<div class="topnav" id="myTopnav">
<a>
<form name="myform" action="index.html" method="POST">
<input type="image" class="image" src="assets/images/showzafavcon.jpg" alt="showza_icon" width="125" height="125">
</form>
</a>
<div class="itemDiv"></div>
<a href="#news">
<div class="item">
live dates
</div>
</a>
<a href="#news">
<div class="item">
gallery
</div>
</a>
<a href="#news">
<div class="item">
news
</div>
</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars">
<div class="menuItem">
menu
</div>
</i>
</a>
</div>
</div>
</div>
</body>
</html>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>【问题讨论】：
-
对这些图像源使用完整路径，例如：example.com/assets/images/showza.png
-
@rangerz 我试过这个没有用，使用的是 GitHub 原始格式。
-
你能提供一个示例页面来检查一下吗？
-
当我在这里检查时，示例中提供的 HTML 也无效：validator.w3.org/#validate_by_input+with_options
-
@JasonLydon 嗨，我已经在 W3 上进行了验证，可以确认这些更改不能解决问题，我很快就会设置一个页面。