Introduction to the bug analysis of CSS 3 transform properties

Source: Internet
Author: User
Recently in a function, you need to display the content through the window, and then choose to use the CSS 3 transform properties of the translate () parameters to achieve the center of the window positioning.

Tinker for a long time, testing Chrome completely normal, Edge also normal, well, to here I feel that I have seen the end, never thought, open IE 11 directly after the vomiting of blood! Set the Transform property unexpectedly completely invalid, agreed IE 9 and above can be compatible with it? How is it different from the imagination?

Before trying a variety of elements to increase the vertical center of the method, are all kinds of table nesting ah, compatibility Ah, applicability ah, more or less the emergence of problems, and finally determined to cast down IE 8 with transform, the result gave me this one out.

Find problems

At that time I was going to simply let the whole IE all go well, plan to let IE series except Edge all only use Margin:auto; Dafa around the center, so to ask about IE's proprietary hack, found that since IE 10 has not been hack ...

Anger instantaneous use of heart, ah hello, Microsoft your browser can not automatically upgrade, sooner or later not to keep up with the times, not to let people take care of it! You have to be unified to accommodate you, right?

Solving method

I always do not like to use JS to control the style, and finally, one side scold Microsoft family, side of the mouth too upright holding the last glimmer of hope really just handy use IE 11 open w3school about translate () of the demo page, ah, how effective?

is IE 11 not supported translate () as a percentage of the value? Then try to use the debug table to change the value to a percentage, unexpectedly is valid.

??? What's the situation???

After some toss, finally came to the conclusion: translate () in IE, parentheses next to the space can not be added, a plus on the invalid .

and similar RGBA () does not have this question, really lets the human to be inconceivable the BUG, the forced Death compulsive disease rhythm.

Turned over, in fact, the WordPress core CSS also found this problem, and added a note.

S

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.