致命问题(7项)
rgba() 半透明背景
rgba() 出现在 header、banner、sidebar-left、404 页、以及
editor.py、search.py、stats.py 三个 CGI
脚本的生成样式中。全站所有页面的深色半透明背景都依赖
rgba(0, 0, 0, 0.45)。
IE5.5 遇到不认识的颜色值直接跳过,背景变成透明,整个网站的深色主题在
IE5.5 里就是一团浆糊。修复方法: IE 专有的
filter:progid:DXImageTransform.Microsoft.gradient ——这个
filter 虽然是为渐变设计的,但用同样的起止颜色可以实现不透明度的效果。
ARGB 格式里 #73000000 的 73 就是 45%
不透明度。
不过这项我并不打算修复,在老设备上背景变成透明并不是一件坏事,虽然不兼容rgba()属于致命错误。
flex 布局
表情面板用了一个
<div style="display: flex; flex-wrap: wrap; gap: 1px">
包裹 20 个表情图片。IE5.5上不能正确加载
flex,所有表情图会按默认块级排列堆成一列。
统计页(stats.py)用了 display: flex、gap: 18px、flex: 1、
min-width、max-width,属于 CSS3。不过在
IE5.5 打开统计页除了IP地图有些大小错误,其他的倒是正常。
修复方法:表情面板改回
<table>
布局,统计页暂时不考虑更改,仅缩小IP地图的尺寸应该能解决。
box-sizing: border-box
侧边栏的留言板表单严重依赖
box-sizing: border-box 来控制输入框宽度。 IE5.5
无法识别这个属性,width: 100% 的 input 会因为 border 和
padding 撑破容器。需要手动把 border/padding 值从 width 里扣掉。
overflow-x / overflow-y
留言板和更新日志的滚动容器用了
overflow-y: auto; overflow-x: hidden;。 IE5.5 只认
overflow 这个简写,虽然不支持
overflow-x/y,但看起来没什么错误。
toolbox.py 的 3 个 JS 问题
工具箱的"复制密码"功能用了三个 IE5.5 不支持的 API:
document.querySelector('.result-box span') Selectors API
是 DOM Level 2+ 的东西,IE5.5 只有 DOM Level 1。得改用
document.getElementsByTagName('span')
遍历,或者直接给目标元素加 ID。
box.textContent textContent 是 DOM Level 3 的,IE5.5 用
innerText。
document.execCommand('copy') 虽然 execCommand 在 IE4
就有了,但 'copy' 命令直到 IE10 才支持。IE5.5 的剪贴板 API 是
window.clipboardData.setData('Text', ...)。
|