写了几篇博客,突然发现了一个奇怪的问题。在PC端的Chrome浏览器里显示为一行的博客标题。在手机上的Safari浏览器上明明不足一行却莫名的从中间换行,变成了不协调的两行。后来在Chrome浏览器了模拟成手机分辨率显示页面一样是正常的,没有换行。突然意识到这一次又是Safari浏览器兼容性问题了。
  这是PC上Chrome浏览器模拟手机分辨率的正常页面:
  

  
  这是手机上Safari浏览器莫名换行的页面:
  

  
  既然是页面问题那就按F12调试吧。在调试工具上选择标题元素发现那个标题文字的前后有大片空格并且存在换行。会不会就是因为这个呢?
  Chrome浏览器调试工具的Elements窗口:
  

  
  直接找到对应的源代码发现那个a标签不是写成一行的,而是写成了三行。这写法也没什么问题呀。莫非Safari浏览器把这个换行也显示到页面上了。源代码如下:

  
  果断改成一行:

  
  部署之后在Safari浏览器中查看发现正常了。没有出现之前换行的问题。修改后的
  效果如下:
  

  
  个人感觉可能是Safari浏览器或者系统的换行符不一样,解析结果出现了差异。等以后找到具体原因了再补充到下面吧。