【HTML】css樣式writing-mode垂直顯示文本測(cè)試
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
writing-mode:控制文字的屬性方向,但是不是所有的瀏覽器都兼容,在網(wǎng)頁(yè)上使用時(shí),有的瀏覽器顯示不出該樣式。 測(cè)試瀏覽器:IE、QQ瀏覽器兼容模式。 測(cè)試瀏覽器:QQ瀏覽器極速模式 測(cè)試瀏覽器:火狐 測(cè)試結(jié)果:就測(cè)試的幾個(gè)瀏覽器和自己瀏覽器的當(dāng)前版本來(lái)說(shuō),tb-rl在div中效果都是一致的。中文和英文的文字方向不同,因?yàn)橐话憔蛠喼拮钟写怪睂懛ā?/p> 測(cè)試代碼: <div style="width:400px;height:100px;background:#8ee09f;"> div中文まで<br>LODOP勞道譜 </div> <div style="width:400px;height:100px;background:#8ea5e0;writing-mode:tb-rl;"> div中文まで<br>LODOP勞道譜 </div> <div style="width:400px;height:100px;background:#dd8ee0;writing-mode:vertical-lr;"> div中文まで<br>LODOP勞道譜 </div> <table border=1> <tr> <td style="width:400px;height:100px;writing-mode:tb-rl;background:#8ee0df;">td中文まで<br>LODOP勞道譜</td> </tr> <tr> <td style="width:400px;height:100px;writing-mode:vertical-lr;background:#e0d58e;">td中文まで<br>LODOP勞道譜</td> </tr> </table> 圖示:就測(cè)試的幾個(gè)瀏覽器和自己瀏覽器的當(dāng)前版本來(lái)說(shuō),tb-rl在div中效果都是一致的,且tb-rl在IE和兼容模式里,在td里也和div中效果一樣。 在qq瀏覽器兼容和極速模式下測(cè)試了下在div中居中的垂直的文字,結(jié)果也是tb-rl在qq瀏覽器兼容和極速里都正常,加上行高等后,在qq兼容模式里,vertical-rl在div里顯示有問(wèn)題,加了行高后就是水平的了文字跑到了下面。 <div style="width:400px;height:100px;background:#8ee09f;text-align:center;line-height:100px;"> div中文まで </div> <div style="width:400px;height:100px;background:#8ea5e0;text-align:center;line-height:400px;writing-mode:tb-rl;"> div中文まで </div> <div style="width:400px;height:100px;background:#dd8ee0;text-align:center;line-height:400px;writing-mode:vertical-lr;"> div中文まで </div> <table border=1> <tr> <td style="width:400px;height:100px;writing-mode:tb-rl;background:#8ee0df;">td中文まで</td> </tr> <tr> <td style="width:400px;height:100px;writing-mode:vertical-lr;background:#e0d58e;">td中文まで</td> </tr> </table> 圖示:
該文章在 2023/9/28 1:18:50 編輯過(guò) |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |