|
|
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="x-dns-prefetch-control" content="on"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><meta name="renderer" content="webkit"><meta name="force-rendering" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="HandheldFriendly" content="True"><meta name="mobile-web-app-capable" content="yes"><link rel="shortcut icon" href="https://hans362-img.oss.0vv0.top/favicon.ico"><link rel="icon" type="image/png" sizes="16x16" href="https://hans362-img.oss.0vv0.top/favicon-16x16.png"><link rel="icon" type="image/png" sizes="32x32" href="https://hans362-img.oss.0vv0.top/favicon-32x32.png"><link rel="apple-touch-icon" sizes="180x180" href="https://hans362-img.oss.0vv0.top/apple-touch-icon.png"><link rel="mask-icon" href="https://hans362-img.oss.0vv0.top/safari-pinned-tab.svg"><title>UTF8-BOM编码导致Html顶部白条问题 | Hans362 's Blog</title><meta name="keywords" content="Web, Hans362"><meta name="description" content="自从给博客加上了Google Adsense的广告，就出现了一个很困扰我的问题：网页顶部莫名空出了一个白条。虽然对于网页的访问没有什么影响，但是…强迫症不能忍啊！这一切的背后，究竟是人性的扭曲，还是道德的沦丧，请阅读本篇文章～（大雾"><meta property="og:type" content="article"><meta property="og:title" content="UTF8-BOM编码导致Html顶部白条问题"><meta property="og:url" content="https://blog.hans362.cn/post/html-white-stripe-caused-by-urf8-bom/"><meta property="og:site_name" content="Hans362 's Blog"><meta property="og:description" content="自从给博客加上了Google Adsense的广告，就出现了一个很困扰我的问题：网页顶部莫名空出了一个白条。虽然对于网页的访问没有什么影响，但是…强迫症不能忍啊！这一切的背后，究竟是人性的扭曲，还是道德的沦丧，请阅读本篇文章～（大雾"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://hans362-img.oss.0vv0.top/2018/03/09/9E55D822-DEAB-4066-9F58-DD15A8291299.jpeg?width=1920"><meta property="og:image" content="https://hans362-img.oss.0vv0.top/2018/03/09/4CA2B09C-ED99-4327-9AAC-846CFDD02A32.jpeg?width=1920"><meta property="article:published_time" content="2018-03-09T04:31:00.000Z"><meta property="article:modified_time" content="2025-04-11T10:35:15.356Z"><meta property="article:author" content="Hans362"><meta property="article:tag" content="Web"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:image" content="https://hans362-img.oss.0vv0.top/2018/03/09/9E55D822-DEAB-4066-9F58-DD15A8291299.jpeg?width=1920"><link rel="stylesheet" href="/css/style/main.css"><link rel="stylesheet" id="hl-default-theme" href="https://blog.hans362.cn/npm/highlight.js@10.1.2/styles/atom-one-light.css" media="none"><link rel="stylesheet" id="hl-dark-theme" href="https://blog.hans362.cn/npm/highlight.js@10.1.2/styles/atom-one-dark.css" media="none"><script src="/js/darkmode.js"></script><link rel="dns-prefetch" href="https://analytics.0vv0.top"><link rel="preconnect" href="https://hans362-img.oss.0vv0.top"><meta name="generator" content="Hexo 7.1.1"><link rel="alternate" href="/atom.xml" title="Hans362 's Blog" type="application/atom+xml"></head><body><div class="app-shell-loader">加载中...</div><div class="container" tabindex="-1"><header><div class="header__left"><a href="/" class="button"><span class="logo__text">Hans362 's Blog</span></a></div><div class="header__right"><div class="navbar__menus"><a href="/" class="button"><div class="navbar-menu">首页</div></a><a href="/archives/" class="button"><div class="navbar-menu">归档</div></a><a href="/tags/" class="button"><div class="navbar-menu">标签</div></a><a href="/bangumi/" class="button"><div class="navbar-menu">追番</div></a><a href="/links/" class="button"><div class="navbar-menu">友链</div></a><a href="/about/" class="button"><div class="navbar-menu">关于</div></a><a href="/atom.xml" class="button"><div class="navbar-menu">RSS</div></a></div><a href="/search/" class="button"><div id="btn-search"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="24" height="24" fill="currentColor" stroke="currentColor" stroke-width="32"><path d="M192 448c0-141.152 114.848-256 256-256s256 114.848 256 256-114.848 256-256 256-256-114.848-256-256z m710.624 409.376l-206.88-206.88A318.784 318.784 0 0 0 768 448c0-176.736-143.264-320-320-320S128 271.264 128 448s143.264 320 320 320a318.784 318.784 0 0 0 202.496-72.256l206.88 206.88 45.248-45.248z"></path></svg></div></a><a href="javaScript:void(0);" rel="external nofollow noreferrer" class="button"><div id="btn-toggle-dark"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></div></a><a href="#" class="button" id="b2t" aria-label="回到顶部" title="回到顶部"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="32" height="32"><path d="M233.376 722.752L278.624 768 512 534.624 745.376 768l45.248-45.248L512 444.128zM192 352h640V288H192z" fill="currentColor"></path></svg> </a><a class="dropdown-icon button" tabindex="0"><div id="btn-dropdown"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="24" height="24" fill="none" stroke="currentColor" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round"><path fill="currentColor" d="M3.314,4.8h13.372c0.41,0,0.743-0.333,0.743-0.743c0-0.41-0.333-0.743-0.743-0.743H3.314c-0.41,0-0.743,0.333-0.743,0.743C2.571,4.467,2.904,4.8,3.314,4.8z M16.686,15.2H3.314c-0.41,0-0.743,0.333-0.743,0.743s0.333,0.743,0.743,0.743h13.372c0.41,0,0.743-0.333,0.743-0.743S17.096,15.2,16.686,15.2z M16.686,9.257H3.314c-0.41,0-0.743,0.333-0.743,0.743s0.333,0.743,0.743,0.743h13.372c0.41,0,0.743-0.333,0.743-0.743S17.096,9.257,16.686,9.257z"></path></svg></div></a><div class="dropdown-menus" id="dropdown-menus"><a href="/" class="dropdown-menu button">首页</a> <a href="/archives/" class="dropdown-menu button">归档</a> <a href="/tags/" class="dropdown-menu button">标签</a> <a href="/bangumi/" class="dropdown-menu button">追番</a> <a href="/links/" class="dropdown-menu button">友链</a> <a href="/about/" class="dropdown-menu button">关于</a> <a href="/atom.xml" class="dropdown-menu button">RSS</a></div></div></header><cover></cover><main><div class="post-content"><div class="post-title"><h1 class="post-title__text">UTF8-BOM编码导致Html顶部白条问题</h1><div class="post-title__meta"><a href="/archives/2018/03/" class="post-meta__date button">2018-03-09</a> <span class="separate-dot"></span> <a href="/categories/%E6%8A%80%E6%9C%AF%E5%90%91/" class="button"><span class="post-meta__cats">技术向</span></a><style>.post-meta__pv{color:var(--t-l);visibility:hidden;opacity:0;transition:.2s}</style><span class="separate-dot"></span> <span class="post-meta__pv"></span></div></div><aside class="post-side"><div class="post-side__toc"><div class="toc-title">文章目录</div><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#0x01-%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90"><span class="toc-text">0x01 问题分析</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#0x02-%E6%8E%92%E9%99%A4%E6%B3%95%E5%8F%91%E7%8E%B0%E9%97%AE%E9%A2%98"><span class="toc-text">0x02 排除法发现问题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#0x03-%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95"><span class="toc-text">0x03 解决方法</span></a></li></ol></div></aside><a class="btn-toc button" id="btn-toc" tabindex="0"><svg viewBox="0 0 1024 1024" width="32" height="32" xmlns="http://www.w3.org/2000/svg"><path d="M128 256h64V192H128zM320 256h576V192H320zM128 544h64v-64H128zM320 544h576v-64H320zM128 832h64v-64H128zM320 832h576v-64H320z" fill="currentColor"></path></svg></a><div class="toc-menus" id="toc-menus"><div class="toc-title">文章目录</div><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#0x01-%E9%97%AE%E9%A2%98%E5%88%86%E6%9E%90"><span class="toc-text">0x01 问题分析</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#0x02-%E6%8E%92%E9%99%A4%E6%B3%95%E5%8F%91%E7%8E%B0%E9%97%AE%E9%A2%98"><span class="toc-text">0x02 排除法发现问题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#0x03-%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95"><span class="toc-text">0x03 解决方法</span></a></li></ol></div><article class="post post__with-toc card"><div class="post__header"><div class="post__expire" id="post-expired-notify"><p><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" style="fill:#f5a623;stroke:#f5a623"><path fill-rule="evenodd" d="M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"></path></svg> 本文最后更新于 <span id="expire-date"></span> 天前，文中部分描述可能已经过时。</p></div><script>(()=>{var e=Date.parse("2018-03-09"),t=(new Date).getTime(),t=Math.floor((t-e)/864e5);120<=t&&(document.querySelectorAll("#expire-date")[0].innerHTML=t,document.querySelectorAll("#post-expired-notify")[0].style.display="block")})()</script></div><div class="post__content"><html><head><script>var meting_api="https://api-v2.hans362.cn/vip/?server=:server&type=:type&id=:id&r=:r"</script><script class="meting-secondary-script-marker" src="/js/Meting.min.js"></script></head><body><p>自从给博客加上了Google Adsense的广告，就出现了一个很困扰我的问题：网页顶部莫名空出了一个白条。虽然对于网页的访问没有什么影响，但是…强迫症不能忍啊！这一切的背后，<s>究竟是人性的扭曲，还是道德的沦丧</s>，请阅读本篇文章～（大雾</p><span id="more"></span><h2 id="0x01-问题分析"><a class="markdownIt-Anchor" href="#0x01-问题分析"></a> 0x01 问题分析</h2><p>嗯…遇到html问题先浏览器F12一下，立刻就发现了异常，在body部分的开头出现了如下代码：</p><pre><code class="hljs 1c"><span class="hljs-string">"</span>
|
|
|
<span class="hljs-string">"</span></code></pre><p>经过测试，顶部的白条确实是由于这串代码造成的，可是我并没有蠢到会去写这个啊喂！那么究竟是什么原因呢？</p><h2 id="0x02-排除法发现问题"><a class="markdownIt-Anchor" href="#0x02-排除法发现问题"></a> 0x02 排除法发现问题</h2><p>首先由于是加入了Google Ads之后才出现的情况，第一时间想到的就是先去掉广告代码。可是去掉后重新部署依然出现该问题，已基本确定并非Google Ads造成。</p><p>紧接着我想到去翻一翻Coding的提交历史，对几个历史版本进行逐行对比，最终我把目光锁定在了这里：</p><p><img src="https://hans362-img.oss.0vv0.top/2018/03/09/9E55D822-DEAB-4066-9F58-DD15A8291299.jpeg?width=1920" class="lazy" data-srcset="https://hans362-img.oss.0vv0.top/2018/03/09/9E55D822-DEAB-4066-9F58-DD15A8291299.jpeg?width=1920" srcset="/loading.gif" alt="https://hans362-img.oss.0vv0.top/2018/03/09/9E55D822-DEAB-4066-9F58-DD15A8291299.jpeg?width=1920"></p><p>咦？第一行中两个相同的<为什么会显示不同呢？由于代码是在Windows上面修改的，而很多奇奇怪怪的编码问题都发生在Windows上面，所以我的第一反应就是编码问题。</p><p>因为写代码比较喜欢用Notepad++，就检查了一下Header.php的编码，发现竟然是带BOM格式的UTF8！</p><p><img src="https://hans362-img.oss.0vv0.top/2018/03/09/4CA2B09C-ED99-4327-9AAC-846CFDD02A32.jpeg?width=1920" class="lazy" data-srcset="https://hans362-img.oss.0vv0.top/2018/03/09/4CA2B09C-ED99-4327-9AAC-846CFDD02A32.jpeg?width=1920" srcset="/loading.gif" alt="https://hans362-img.oss.0vv0.top/2018/03/09/4CA2B09C-ED99-4327-9AAC-846CFDD02A32.jpeg?width=1920"></p><p>那么什么是BOM呢？</p><p>UTF-8 BOM又叫UTF-8 签名，其实UTF-8 的BOM对UFT-8没有作用，是为了支援UTF-16，UTF-32才加上的BOM，BOM签名的意思就是告诉编辑器当前文件采用何种编码，方便编辑器识别，但是BOM虽然在编辑器中不显示，但是会产生输出，就像多了一个空行。</p><p>这多出来的一个空行就造成了网页中顶部的白条，也解释了前面为什么在提交历史中看似一样的两个<却被识别为不同。哈～原来是BOM的锅～</p><h2 id="0x03-解决方法"><a class="markdownIt-Anchor" href="#0x03-解决方法"></a> 0x03 解决方法</h2><p>在Notepad++编码中修改成无BOM后重新提交Git并部署，果然问题不再复现。</p><p>同时我也发现使用Windows记事本编辑php文件也很可能被加上BOM头，所以没事写代码不要用乱加BOM的编辑器</p><p>参考链接：</p><p><a target="_blank" rel="noopener" href="https://hans362-img.oss.0vv0.top/2018/03/09/9E55D822-DEAB-4066-9F58-DD15A8291299.jpeg?width=1920">1</a><a target="_blank" rel="noopener" href="https://baike.baidu.com/item/BOM/2790364?fr=aladdin">https://baike.baidu.com/item/BOM/2790364?fr=aladdin</a><br><a target="_blank" rel="noopener" href="https://hans362-img.oss.0vv0.top/2018/03/09/4CA2B09C-ED99-4327-9AAC-846CFDD02A32.jpeg?width=1920">2</a><a target="_blank" rel="noopener" href="https://www.cnblogs.com/wt645631686/p/6868826.html">https://www.cnblogs.com/wt645631686/p/6868826.html</a></p></body></html></div><div class="license"><div class="license-title">UTF8-BOM编码导致Html顶部白条问题</div><div class="license-link"><a href="https://blog.hans362.cn/post/html-white-stripe-caused-by-urf8-bom/">https://blog.hans362.cn/post/html-white-stripe-caused-by-urf8-bom/</a></div><div class="license-meta"><div class="license-meta-item"><div class="license-meta-title">本文作者</div><div class="license-meta-text">Hans362</div></div><div class="license-meta-item"><div class="license-meta-title">最后更新</div><div class="license-meta-text">2018-03-09</div></div><div class="license-meta-item"><div class="license-meta-title">许可协议</div><div class="license-meta-text"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="nofollow noopener noreferrer" target="_blank">CC BY-NC-SA 4.0</a></div></div></div><div>转载或引用本文时请遵守许可协议，注明出处、不得用于商业用途！</div></div><div class="post-footer__cats"><a href="/categories/%E6%8A%80%E6%9C%AF%E5%90%91/" class="post-cats__link button">技术向</a><a href="/tags/Web/" class="post-tags__link button"># Web</a></div></article><div class="nav"><div class="nav__prev"><a href="/post/digitalocean-vps-test/" class="nav__link"><div><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M589.088 790.624L310.464 512l278.624-278.624 45.248 45.248L400.96 512l233.376 233.376z" fill="#808080"></path></svg></div><div><div class="nav__label">上一篇</div><div class="nav__title">性价比高但速度一般 - DigitalOcean5刀云主机评测</div></div></a></div><div class="nav__next"><a href="/post/apply-for-google-adsense/" class="nav__link"><div><div class="nav__label">下一篇</div><div class="nav__title">申请Google Adsense在网页上投放广告</div></div><div><svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M434.944 790.624l-45.248-45.248L623.04 512l-233.376-233.376 45.248-45.248L713.568 512z" fill="#808080"></path></svg></div></a></div></div><div class="post__sponsers card"><div class="sponser-label">喜欢这篇文章吗？考虑支持一下作者吧～</div><a class="sponser-button button" href="https://afdian.net/@hans362" rel="external nofollow noreferrer" target="_blank" data-type="afdian">爱发电</a> <a class="sponser-button button" data-type="alipay">支付宝<img class="sponser-qrcode" src="https://hans362-img.oss.0vv0.top/2021/08/05/68281340.jpg"></a></div><div class="post__comments post__with-toc card" id="comment"><h4>评论</h4><div id="disqus_thread">您所在的地区可能无法访问 Disqus 评论系统，请切换网络环境再尝试。</div></div></div></main><footer><p class="footer-copyright">Copyright © 2017 - 2025 <a href="/">Hans362 's Blog</a></p><p>Powered by <a href="https://hexo.io" target="_blank">Hexo</a> | Theme - <a href="https://github.com/ChrAlpha/hexo-theme-cards" target="_blank">Cards</a></p><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8746554831230893" data-ad-slot="6356225601" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({})</script></footer></div><script defer src="https://blog.hans362.cn/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js"></script><script>window.lazyLoadOptions={elements_selector:".lazy"}</script><script async defer data-website-id="5d181692-8a81-4c20-a282-cee87a6b90ef" src="https://analytics.0vv0.top/vue.js"></script><script src="/js/pageviews.js"></script><link rel="stylesheet" href="https://blog.hans362.cn/npm/katex@0.16.0/dist/katex.min.css" crossorigin="anonymous"><script>function loadComment(){let e,n;(e=document.createElement("script")).src="https://blog.hans362.cn/js/disqus.js",document.body.appendChild(e),e.onload=()=>{new DisqusJS({shortname:"hans362-s-blog",siteName:"Hans362 's Blog",api:"https://api-v3.hans362.cn/",apikey:"8Z1UVT4UOk22yNyk9MhpqQ0FLb27Hb1bpV066b4v9zOFie0GQ6VCoJ9TJwoGlCVF",admin:"hans362",identifier:"post/html-white-stripe-caused-by-urf8-bom/",url:"https://blog.hans362.cn/post/html-white-stripe-caused-by-urf8-bom/",nesting:"4"})},(n=document.createElement("link")).rel="stylesheet",n.href="https://blog.hans362.cn/css/disqusjs.css",document.head.appendChild(n)}var runningOnBrowser="undefined"!=typeof window,isBot=runningOnBrowser&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro|msn)bot|crawl|spider|yand|duckgo/i.test(navigator.userAgent),supportsIntersectionObserver=runningOnBrowser&&"IntersectionObserver"in window;setTimeout(function(){var n;!isBot&&supportsIntersectionObserver?(n=new IntersectionObserver(function(e){e[0].isIntersecting&&(loadComment(),n.disconnect())},{threshold:[0]})).observe(document.getElementById("comment")):loadComment()},1)</script></body></html> |