CSS: text-align-last doesnt work in chrome?

匿名 (未验证) 提交于 2019-12-03 08:42:37

问题:

text-align-last is supposed to work in all modern browsers. Im using Chrome 38 and this css property doesn't seem to work - in Deverloper Tools, it strikes out this line.

Any ideas why it would happen? Maybe a Chrome 38 bug? I've found out that it was some kind of an issue in past version of Chrome.

[October 30, 2016 Edit: I'm pretty late with this, but if anyone still finds this answer, text-align-last is supported since Chrome 47, released in December 2015]

回答1:

It has not been implemented in Chrome. There is a bug set to RESOLVED FIXED, but there does not seem to be any information about an actual fix having been implemented. MDN info says that there is support from Chrome 35 but links to this bug.

In dev tools in Chrome 38 the declaration is struck-out but a tooltip text says that the property value is invalid. In Chrome 40 this has been fixed: the tooltip says that the property name is invalid (meaning that it is not recognized/supported by the browser). Enabling “Experimental Web Platform Features” does not seem to help. So the property remains unimplemented.

Edit: As noted in the question now, Chrome supports the feature from version 47, and browser support is good (though not perfect) otherwise, too, see http://caniuse.com/#feat=css-text-align-last



回答2:

Baseline positioning varies in browsers. That is why text-align-last in Chrome is behaving different. Explained here with possible fix

http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text

HTML

<div>   <span class="letter">T</span>   <span class="strut"></span> <div> 

CSS

div {   width: 100px;   height: 100px;   border: thin black solid; } .letter {   font-size: 100px;   line-height: 0px;   background-color: #9BBCE3; } .strut {   display: inline-block;   height: 100px; }     

Summary
1. Inline images use the bottom edge of the image as the baseline
2. So add an empty inline-block strut to the div to position the baseline for the entire line.



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!