【HTML】css樣式writing-mode垂直顯示文本測試
當前位置:點晴教程→知識管理交流
→『 技術文檔交流 』
writing-mode:控制文字的屬性方向,但是不是所有的瀏覽器都兼容,在網頁上使用時,有的瀏覽器顯示不出該樣式。 測試瀏覽器:IE、QQ瀏覽器兼容模式。 測試瀏覽器:QQ瀏覽器極速模式 測試瀏覽器:火狐 測試結果:就測試的幾個瀏覽器和自己瀏覽器的當前版本來說,tb-rl在div中效果都是一致的。中文和英文的文字方向不同,因為一般就亞洲字有垂直寫法。 測試代碼: <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> 圖示:就測試的幾個瀏覽器和自己瀏覽器的當前版本來說,tb-rl在div中效果都是一致的,且tb-rl在IE和兼容模式里,在td里也和div中效果一樣。 在qq瀏覽器兼容和極速模式下測試了下在div中居中的垂直的文字,結果也是tb-rl在qq瀏覽器兼容和極速里都正常,加上行高等后,在qq兼容模式里,vertical-rl在div里顯示有問題,加了行高后就是水平的了文字跑到了下面。 <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 編輯過 |
關鍵字查詢
相關文章
正在查詢... |