PHP判断Cookie是否存在切换CSS样式失效问题排查

问题排查及修复方案 #

你遇到的问题可以从以下几个维度逐一排查：

• 第一优先排查：else分支CSS语法错误导致样式不生效，让你误以为始终走if分支
  你现有else分支的CSS代码存在两处括号未闭合的问题：main属性的大括号缺失闭合，整个@media查询的外层大括号也缺失闭合，就算代码走入else分支，CSS也会因为语法错误无法生效，视觉上会让你误以为始终加载if分支的样式。
• 第二排查：Cookie读取逻辑问题
  1. PHP的$_COOKIE全局变量只会在请求初始化时读取请求头携带的Cookie，如果你是在当前请求的代码中才设置CookieLawInfoConsent，本次请求的$_COOKIE中不会存在该值，需要刷新页面后才会生效。
  2. 可以先加调试代码验证Cookie是否真的存在：在判断逻辑前插入<?php var_dump(isset($_COOKIE['CookieLawInfoConsent'])); ?>，确认Cookie名拼写、大小写完全匹配，同时可以在浏览器开发者工具的「应用/存储」面板中查看对应站点下是否真的存在该Cookie，Cookie的作用域、路径是否和当前页面匹配。
  3. 如果Cookie设置时未指定过期时间，属于会话Cookie，关闭浏览器就会自动清除；如果设置了过期时间，确认是否已经过期。

修复后的完整代码 #

<?php 
// 调试用，确认Cookie读取是否正常，没问题后可以删掉
// var_dump(isset($_COOKIE['CookieLawInfoConsent']));
if ( isset($_COOKIE['CookieLawInfoConsent']) ) : ?>
<style>
    html.has-not-scrolled #desktop-header { top: 0px; }
    #mobile-header { top: 0px; }
    main {top: 0px;}
</style>
<?php else : ?>
<style>
    @media all and (min-width: 1201px) and (max-width: 1235px) {
        html.has-not-scrolled #desktop-header { top: 80px; }
        #mobile-header { top: 80px; }
        main {top: 80px;}
    } /* 补全media查询的闭合括号 */
</style>
<?php endif; ?>

内容的提问来源于stack exchange，提问作者Jon