As above codeZERO WIDTH SPACE in each language expression.JS using var b = a.replace (/\u200b/g, "); To replace, remove the ZERO WIDTH SPACE.Http://www.fileformat.info/info/unicode/char/200b/index.htm
Encodings
HTML Entity (decimal)
#8203;
HTML Entity (hex)
#x200b;
How to type in Microsoft Windows
Alt +200b
UTF-8
Ultimate Edition One:. clearfix:after {Content: "\200b";Display:block;height:0;Clear:both;}. clearfix {*zoom:1;} /*ie/7/6*/Explanation: Content: "\200b"; this parameter, the Unicode character character has a "0 width space", that is u+200b, instead of the original ".", you can reduce the amount of code. And no longer use Visibility:hidden.
. clearfix:before,.c
improved by the following:Ultimate Edition One:. clearfix:after {Content: "\200b";Display:block;height:0;Clear:both;}. clearfix {*zoom:1;} /*ie/7/6*/Explanation: Content: "\200b"; this parameter, the Unicode character character has a "0 width space", that is u+200b, instead of the original ".", you can reduce the amount of code. And no longer use Visibility:hidd
was further improved by the following:
Ultimate Version One:
CSS code copy content to clipboard
. clearfix:after {
Content: "200B";
Display:block;
height:0;
Clear:both;
}
. clearfix {*zoom:1} /*ie/7/6*/
Explanation: Content: "200B"; this parameter, Unicode character character has a "0-width space", that is, u+200b, instead of the original ".", you can
/* to fix IE6 . */ . Clearfix {*zoom:1;} . Clearfix:after {content:"."; Display:block; height:0; Clear:both; overflow:hidden;}The Clearfix is used on the parent element. But what is the role of clearfix:before{}? Can you not write it?. Clearfix:after{Visibility:Hidden;Display:Block;font-size:0;content: " ";Clear:both;Height:0; }. Clearfix{*zoom:1;}But for many students this level of optimization code is not enough to force, Clearfix developed to the present two Ultimate version. Ultimate Edition
Table-cell, table-caption,any of the inline-blocksBut Display:inline-block will produce extra blanks, so it's also ruled out.The remaining only Table-cell, table-caption, in order to ensure compatibility can be used display:table to make. Clearfix form a block formatting ContextBecause display:table will produce some anonymous boxes, one of these anonymous boxes (display value of Table-cell) forms the block formatting Context.So our new. Clearfix will close the float of the inner element.This w
1. clear{clear:both;line-height:0;}---Create an empty label to implement2:. clearfix:after {content:"200B"; Display:block; height:0; Clear:both; }. clearfix {*zoom:1;} /*ie/7/6*/ (Content: "200B"; this parameter, the Unicode character character has a "0 width space", that is, u+200b, instead of the original ".", you can reduce the amount of code.) And
. Clearfix will close the float of the inner element.This was further improved by the following: Ultimate Edition One:{ content:"\200b"; Display:block; height:0; Clear:both;} {*zoom:1;} /* IE/7/6 */Explanation: Content: "\200b"; this parameter, the Unicode character character has a "0 width space", that is u+200b, instead of the original ".",
: table generates some anonymous boxes, one of these anonymous boxes (the display value is table-cell) will form the Block Formatting Context.
In this way, our new. clearfix will close the floating of internal elements.
Some people have made improvements later:
Release Version 1:
. Clearfix: after {Content: "\ 200B ";Display: block;Height: 0;Clear: both;}. Clearfix {* zoom: 1;}/* IE/7/6 */Explanation: content: "\
7.0 content;5) zoom: 1 triggers IE hasLayout.After analysis, we found that except for clear: both, other code is used to hide the content generated by the content, which is why other versions of closed floating have font-size: 0, line-height: 0.Optimization Solution 1:The code of the method with the empty tag closed and floating seems to be somewhat redundant. It is found through the query that there is a "zero-width space" in the Unicode character, that is, U +
) height:0 Avoid creating content that destroys the height of the original layout.3) Visibility:hidden makes the generated content invisible and allows content that may be generated to be covered by the content can be clicked and interacted with;4) Through the content: "." Generate content as the last element, whether it is a point or anything else is OK, such as oocss inside there is a classic content: "Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", some versions may be content Inside the content is empty,
uses rounded corner transition.
I made a simple demo to list the HTML structure and CSS:
Demo
To achieve the bottom corner transition, the key is the following two points:
Border-radiusThis attribute works well in all modern browsers and does not require a prefix in Firefox or chrome updates.
The rounded corner of the tab cannot be filled.LiTo locate and fillATo overwrite the hidden tab edge.
I have drawn a block diagram of the specific structure, and I feel that the p
the generated content;
4) use content: "." To generate the content as the last element.ContentYes or others. For example, there is a classic content in oocss: "XXXXXXXXX". In some versions, the content in the content may be blank. It is not recommended to do this if it is cool, firefox will still generate additional gaps until 7.0 content;
5) ZOOM: 1 triggers ie haslayout.
Analysis shows that,BesidesClear: Both is used to close the float. Other code is used to hide the content generated by the
generated to be covered by the content can be clicked and interacted with;4) Through the content: "." Generate content as the last element, whether it is a point or anything else is OK, such as oocss inside there is a classic content: "Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", some versions may be content Inside the content is empty, a bit of cold is not recommended to do so, Firefox until 7.0 content: "" will still produce extra space;5) zoom:1 trigger IE haslayout.The analysis found that, in additio
there is not enough evidence to prove their rigor, but at least I think it is more reliable than simply removing content. Improved version one
The Unicode character character has a "0-width space", that is, the u+200b , which replaces the content "point" of the contents by using this character, which reduces the amount of code-because the character itself is invisible, so no longer has to be reused Visibility:hidden; To hide it. The code then becomes
this if it is cold. Firefox will still generate additional gaps until 7.0 content;
5) ZOOM: 1 triggers ie haslayout.
After analysis, we found that except for clear: Both, other code is used to hide the content generated by the content, which is why other versions of closed floating have Font-size: 0, line-Height: 0.
Optimization solution 1:
The code of the method with the empty tag closed and floating seems to be somewhat redundant. It is found through the query that there is a "zero
why other versions of closed floating have Font-size: 0, line-Height: 0.Optimization solution 1:The code of the method with the empty tag closed and floating seems to be somewhat redundant. It is found through the query that there is a "zero-width space" in the Unicode character, that is, U + 200b, this character is invisible, so we can omit visibility: hidden.
. Clearfix: After {content: "\ 200b"; displ
somewhat redundant, through the query found that the Unicode character character has a "0 width space", that is, u+200b, the character itself is not visible, so we can completely omit the Visibility:hiddenCopy CodeThe code is as follows:. clearfix:after {content: "\200b"; display:block; height:0;clear:both;}. clearfix {*zoom:1;}.Excellence Programme II:By Nicolas Gallagher Big Wet Proposed, original: A new
be clicked and interacted with;4) Through the content: "." Generate content as the last element, whether it is a point or anything else is OK, such as oocss inside there is a classic content: "Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", some versions may be content Inside the content is empty, a bit of cold is not recommended to do so, Firefox until 7.0 content: "" will still produce extra space;5) zoom:1 trigger IE haslayout.The analysis found that, in addition to Clear:both used to clear the float, th
, whether it is a point or anything else is OK, such as oocss inside there is a classic content: "Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", some versions may be content Inside the content is empty, a bit of cold is not recommended to do so, Firefox until 7.0 content: "" will still produce extra space;5) zoom:1 trigger IE haslayout.The analysis found that, in addition to Clear:both used to clear the float, the other code is nothing more than to hide the content generated, which is why other versions of
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.