“LLWiki:管理员技术手册”的版本间差异

手机版LLWiki使用Minerva Neue皮肤，与桌面版的Vector皮肤相比，不仅界面有很大差异，众多基础HTML元素也都添加了不同的CSS样式。为了适配窄屏设备，Minerva皮肤还添加了大量基于<code lang="css">@media</code>的规则，一般以设备宽度720px为分界使用不同的样式。以下着重介绍<code>&lt;table&gt;</code>和<code>&lt;img&gt;</code>这两种需要CSS修正的重灾区。

这里重点说明一下第二和第四条规则造成的影响。第二条规则使得表格的外层边框、行边框和单元格边框合并，可能造成一系列关于边框的CSS规则出现不符合预期的表现，尤其是<code>&lt;table&gt;</code>的<code>cellspacing</code>属性会无法生效。因此一般建议避免使用<code>cellspacing</code>这一HTML属性，改为使用CSS中的<code>border-spacing</code>。另外，在需要<code>border-spacing</code>或<code>border-radius</code>等样式时，请同时指定<code lang="css">border-collapse: separate;</code>以使手机版生效。

第四条规则的本意是在窄屏上<code>&lt;table&gt;</code>元素不会将页面撑得过宽，但这同时会造成外层的<code>&lt;table&gt;</code>和内层的<code>&lt;tbody&gt;</code>分离。特别是如果外层<code>&lt;table&gt;</code>规定了边框或背景色时，很容易看出样式的错误。为此一般需要主动指定<code lang="css">display: table;</code>以修复这一问题，LLWiki有很多预定义的表格CSS类也都添加了这一规则<ref name="site-styles">[[mediawiki:gadget-site-styles.css|全站CSS]]</ref>。但这样修改的话又同时会造成重新面临过宽的表格将整个页面都撑得过大了的问题。LLWiki现定义了<code>table-wrapper</code>类<ref name="site-styles" />，用于套在这样的宽表格外：<code lang="html"><nowiki><div class="table-wrapper"></nowiki></code>，这个外层容器会在窄屏上通过<code lang="css">overflow-x: auto;</code>限制里面的表格宽度。