mmis1000 寫:
之所以說限高沒用是因為
文字的對齊是下緣，
但雙色文字本身的 top:0px是對齊上緣
所以就算用高度把莫名多出的部分截掉，
雙色字偏掉的位置也不會回來
另外上面丟出的網址中，
事實上已經用height把line的高度限制住了
但雙色字依舊是偏掉的
其實你講的這個方法確實是有用,
應該說... BBSFox原本的排版中, 出了兩個問題:
1.
行高沒限制住, 因此每行的底下有背景色區塊溢出到下一行(但會被下一行的上半部蓋掉), 這個問題我是用u881831板友提供的方法解決的, 就是用block把每行高度完全鎖死.
(至於為什麼不是用inline-block, 下面會解釋)
2.
雙色字的左半部高度被撐高, 這個問題我是用你提供的方法解決的, 因為即使該行的行高已經用block鎖住, 只要span的本體不是用inline-block, 左半部就會上浮.
而同樣的排板拿到Chrome上跑, Chrome的呈現就沒有上面兩個問題.
Chrome上不用使用inline-block或block, 就可以正確限制行高, 不會有背景溢色.
雙色字的左半被撐高的問題在Chrome也不會發生. 因此當我第一次把BBSFox搬到Chrome上時就有感覺到Chrome的輸出比較好看(應該說符合設計者的期待). 不過我還是比較喜歡Firefox, 所以即使排板上有點不如意,也希望能找些方法來解決.
好, 回到上面那兩個問題, 事實上問題1還跟BBSFox的一個設計有關, 就是板面結構.
BBSFox原本的網頁結構是長這樣:
代碼:
<body>
<div>
<span id="line1"> ... </span><BR>
<span id="line2"> ... </span><BR>
<span id="line3"> ... </span><BR>
...
...
...
<span id="line22"> ... </span><BR>
<span id="line23"> ... </span><BR>
<span id="line24"> ... </span><BR>
</div>
</body>
可以看到每行結尾都加入了一個<BR>, 也就是換行, 經過幾次修改和測試, 得知就是這個換行在搞鬼,
當你的結構是
代碼:
<span style='display:inline-block;height:1em;overflow-y:hidden;'>.... </span>
時, 行高正確. 你的下一行會緊貼著上一行(當然inline-block 不會換行, 我看到的下一行來自文字太長的換行).
當你的結構是
代碼:
<span style='display:inline-block;height:1em;overflow-y:hidden;'>.... </span><BR>
時...你的下一行會比你預期的更下面一些.(即使你在更外面一層用line-height:1em限制也一樣)
因為那個<BR>在<span>外面, 所以不會受到<span>的限制, 這很容易理解.
所以我後來修正成下面這樣:
代碼:
<body>
<div>
<span id="line1" style='display:inline-block;height:1em;overflow-y:hidden;'> ... <BR></span>
<span id="line2" style='display:inline-block;height:1em;overflow-y:hidden;'> ... <BR></span>
...
...
...
<span id="line23" style='display:inline-block;height:1em;overflow-y:hidden;'> ... <BR></span>
<span id="line24" style='display:inline-block;height:1em;overflow-y:hidden;'> ... <BR></span>
</div>
</body>
這樣行高應該會正確嗎? 錯了, 根據測試, 那個<BR>還是會讓下一行的位置跑掉.
直到我把display直接改成block才解決.
之前我認為inline-block在高度限制上的效果會等於block, 看來不完全正確.
當然, 可能有人會想問, 為什麼一定要有那個<BR>, 難道是因為inline和inline-block本身不會換行才寫的嗎?
如果是為了排板上的換行, 把每行都定義成block就可以自動換行了.
事實上, 在BBSFox當中, 那個<BR>的目的在於當使用者作copy動作時自然地插入換行.
讓BBS頁面的輸出完全接近一個標準的文字版Html頁面一直是BBSFox設計的核心.
使用者圈選一行以上作複製的動作就應該copy到一個換行符號,
這樣在和其它有這些功能的套件互動時也比較不會有問題.
經過幾個晚上的修改, 這兩天應該可以釋出一個測試的版本.
多虧了mmis1000和u881831兩位板友的幫忙, 解決了很多問題, 再次感謝. m(_ _)m
這次的修改對原有的顯示模組也有一些改進, 包括一些原本顯示上被我實作錯誤的地方,
還有多餘的樣式定義, 一些顯示模組裡的代碼簡化... 等.
還有一些之前覺得怪怪但是因為不影響使用所以沒去修的地方, 都在這次改動中修正了,
一些修正的靈感也來自上面的討論, 參考之後感覺獲益斐淺.
雖然最後修出來的效果可能沒有辦法很完美, 但應可解決一半以上的破圖問題. 我盡我最大的努力.
有任何想法歡迎再提出來討論, 感謝各位.
登入
註冊
問答集
搜尋
