模板討論: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)