Template talk:Sprites
关于在移动端上的不兼容问题
似乎是因为移动端加载的CSS文件中包含.content a>img{max-width:100%!important;height:auto!important}（效果似乎是限制整个图像的宽度不得大于包含它的容器的宽度），导致浏览器对大图片进行了缩放。但是因为这里本来就不想要把整个大图像都显示出来，所以这个限制是不需要的。我想到的一个解决方法是覆盖掉这条CSS规则，对于外部图片，可以直接在<img>标签里加上style="max-width:none !important"来做到这一点，但是对于内部图片，恐怕就不能这样直接用inline CSS来达到目的，而需要管理员在相关的CSS文件里加上一点东西了。
@User:AnnAngela 在下完全不了解客户端的处理方式。以上猜想正确吗？如果是正确的，能否在相关的CSS文件里加上需要的代码？ --D41D8CD98F00B204E9800998ECF8427E 2015年10月16日 (五) 00:00 (CST)
- 有一种魔术字叫
{{filepath:文件名}}，可以将内部文件的地址提取出来，可以利用这个魔术字将内部文件当作外部文件一样使用<img/>插入以及控制css……已经解决。——From AnnAngela the sysop (Talk) 2015年10月16日 (五) 12:53 (CST) - 不过我不知道【link】参数是怎样的格式所以没写link参数的部分，你加上去吧……——From AnnAngela the sysop (Talk) 2015年10月16日 (五) 12:54 (CST)
由于Mediawiki的一些处理……
……主要是自动给段落加上<p>标签，所以这样的wiki代码
[[yyy|<div> xxx </div>]]
生成的HTML代码大概会是
<p><a href="/yyy"><div> xxx </div></a> </p>
……然而HTML规定p标签中不能嵌套div标签。就我个人所知，浏览器通常把<p><div>视为<p></p><div>。显示出来就是div前面多了一个不含任何文字的段落。
目前，Sprites模板就含有类似于上述形式的wiki代码，可以看到的后果是，如果在使用这个模板的时候用了link参数，因为存在多余的段落，图像的位置会有所偏差：（左侧使用link参数，右侧没有使用link参数）
在我的浏览器上，显示出的两张图是不整齐的。
虽然不知道原理是什么，不过如果把整个段落包在<div></div>里面，也就是写成
<div>[[yyy|<div> xxx </div>]]</div>
，就不会产生<p>标签，也就不会出现图像位置偏差。如果撤销掉这次修改，大概也能避免产生多余的<p>，不过或许会有其他问题？
在下想知道的是，客户端会不会因这个修改而影响显示效果？如果会的话，是否存在其他修改方式，使得既能产生正确的HTML代码，又不会影响客户端上的显示效果？ @User:Maverick @User:Nbdd0121 --D41D8CD98F00B204E9800998ECF8427E 2016年1月13日 (三) 16:47 (CST)
希望能规范化不产生多余的p tag。考虑到此模版是以不符合html规定的方式实现功能的，从iOS客户端3.0版就采取不修改、不干预这个模版运作的策略。换而言之，只要识别的class没掉，手机safari能够显示就能在app里显示，如果不能显示也是我的问题。
另外建议在程序员qq群中讨论修改的方法。 —— Maverick※😌message※ 2016年1月13日 (三) 20:34 (CST)