在我的笔记本电脑上的Chrome浏览器中，各种文本装饰属性的工作方式是我所希望的。
而不是我希望他们在iOS上的Safari（注意下划线的颜色不是黄色，也不像上面那样厚）。
这是代码，我用Tailwind做CSS。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'red-primary': '#E43C39',
'red-secondary': '#E5403D',
'yellow-primary': '#F8B334'
},
fontFamily: {
'gibson': 'Gibson, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
}
}
}
}
</script>
</head>
<body>
<header class="bg-[url('img/bg-placeholder.png')] bg-[#D8D8D8] h-[42rem] bg-center bg-no-repeat bg-cover pt-4 flex flex-col justify-between">
<nav class="bg-white mx-4 px-3 h-14 rounded-md flex items-center justify-between shadow-custom z-10">
<div class="w-32 h-12">
<a href="index.html"><img class="h-full" src="img/logo.png" alt="logo"/></a>
</div>
<div id="hamburger-menu" class="h-7 w-9 relative group peer z-10">
<div class="w-full h-1 absolute top-0 bg-yellow-primary transition-all duration-[600ms] ease-linear group-[.clicked]:-rotate-[315deg] group-[.clicked]:top-1/2 group-[.clicked]:-translate-y-1/2"></div>
<div class="w-full h-1 absolute top-1/2 -translate-y-1/2 bg-red-primary transition-opacity duration-[800ms] ease-linear group-[.clicked]:opacity-0"></div>
<div class="w-full h-1 absolute top-full -translate-y-1 bg-yellow-primary transition-all duration-[600ms] ease-linear group-[.clicked]:-rotate-[225deg] group-[.clicked]:top-1/2 group-[.clicked]:-translate-y-1/2"></div>
</div>
<div class="fixed w-3/4 top-0 right-0 bg-gray-100 h-screen transition-all duration-500 peer-[.clicked]:right-0">
<ul class="w-3/4 font-gibson uppercase bold text-xl tracking-[.2rem] mt-20 mx-auto">
<li class="mb-8 hover:text-red-primary hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-primary"><a href="index.html">Home</a></li>
<li class="mb-8 hover:text-red-primary hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-primary"><a href="#">Who We Are</a></li>
<li class="mb-8 hover:text-red-primary hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-primary"><a href="#">Locations</a></li>
<li class="mb-8 hover:text-red-primary hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-primary"><a href="#">Job Openings</a></li>
<li class="mb-8 hover:text-red-primary hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-primary"><a href="#">News & Updates</a></li>
<li class="mb-8 hover:text-red-primary hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-primary"><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
</header>
</body>
</html>我的iPhone运行的是15.7.1版，据我所知，这意味着它也运行的Safari版本15，它支持装饰厚度和装饰颜色属性，所以我不知道为什么它显示不同。
任何想法都很感激。
爱你的凯尔
1条答案
按热度按时间czq61nw11#
它应该是
hover:decoration-yellow-100而不是hover:decoration-yellow-1。可能这就是它不工作的原因。同样，hover:text-red-1应该是hover:text-red-100。此外，我没有看到完整的代码，所以我不知道为什么它没有为您工作。
Playground