Home > Developer > Web Develop
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>margin maximum value when vertical values are taken </title>
<style type= "Text/css" >
. a {width:300px; height:200px; border:1px solid #FFCC33; background: #FFFF99; margin:30px 0;}
. b {width:300px; height:200px; border:1px solid #99CC33; background: #DDECBF; margin:50px 0;}
</style>
<body>
<div class= "A" > My up and down margin value is 30px</div>
<div class= "B" > My top and bottom margin value is 50px<br/>
<br/>
But the space between our two is only 50px and not 80px yo ~~</div>
</body>
UL Li High in IE6, IE7, IE8, FF compatibility problem resolution
In the page sometimes use ul li list when IE6, IE7, IE8, FF height will be different (where IE6 and IE7 height, IE8 and ff height), set high after use overflow:hidden; This problem has been bothering me so much that I can only use div to make a list, but it's only a matter of coping, but it's not actually solving the problem.
Later on the Internet found a method, in the Li style add vertical-align:bottom will solve, but the reason still do not understand, hope to see a friend can give a reasonable explanation, thank you!
I checked the CSS help document, the description of vertical-align is this:
Grammar:
vertical-align : Auto | Baseline | Sub | Super | Top | Text-top | Middle | Bottom | Text-bottom | Length
Value:
Auto:css1 aligning object content based on the value of the Layout-flow property
Baseline:css1 the default value. Aligns the contents of objects that support the valign attribute with the baseline
SUB:CSS1 Subscript for vertical aligned aligned
Super:css1 the superscript of vertical aligned aligned
Top:css1 aligns the top of the content object of the object that supports the valign attribute
Text-top:css1 aligns the text of the object that supports the valign attribute with the top of the object
Middle:css1 aligns the contents of objects that support the valign attribute with the middle of the object
Bottom:css1 aligns the contents of objects that support the valign attribute with the bottom of the object
Text-bottom:css1 aligns the text of the object that supports the valign attribute with the top of the object
Length:css2 length values consisting of floating-point numbers and unit identifiers | Percentage. Can be a negative number. Defines the offset that is calculated from the baseline. The baseline is 0 for the value and 0% for the percentage. See length units. Currently IE has not implemented this parameter
Description
Sets or retrieves the vertical alignment of the object's contents.
The default value for this property is auto for Currentstyle objects. is baseline for other objects.
This property is read-only for Currentstyle objects. Readable and writable for other objects.
The corresponding script attribute is verticalalign.
About the benefits of IE8 CSS marginIe6/ie7/ie8/firefox CSS All-compatible margin problem solving methodAbout IE6/7 Form offset issues
Source: Internet
Anon
Time: 07-04 17:00:51
Reviews: Ie6/ie7/ie8/firefox CSS All kinds of compatibility margin problem solving methods, the need for friends can refer to the next. Really good.
External
. main{float:left; #float: None;_float:none;
Html*.main
*+html. Main
* HTML. Main
The 1th line is for Firefox and other browsers to see
The 2nd line to Safari/ie6/ie7 see, if the safari/ie6/ie7 visual effect is not unified, it will be in the back with IE6/IE7 definition
Line 3rd to IE7 see
Line 4th to IE6 and older versions.
Built
. Main
1th float for Firefox and other browsers to see
The 2nd plus # float gives IE7 a look
The 3rd float to IE6 and the older version
The 4th plus [float for Safari to see
The 5th plus] float to IE see
Cores used by various common browsers (Rendering Engine)
Mozilla Firefox (Gecko)
Internet Explorer (Trident)
Opera (Presto)
Konqueror (khtml)
Safari Swift (WebKit)
Use CSS to automatically hide the content beyond the width and omit the display, browser compatible with IE, FF
Text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-icab-text-overflow:ellipsis;
-khtml-text-overflow:ellipsis;
-moz-text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
The private properties of the basic non-IE browser will start with-xxx-.
-o-is the Presto-engine opera private,
-icab-is icab private,
-khtml-is a browser with khtml as the engine (e.g. Konqueror Safari),
-moz-is a browser (such as Firefox,mozilla) with Mozilla's gecko as its engine,
-webkit-is a browser (such as Safari, Swift) with WebKit rendering engine (a derivative of khtml).
Not to say that like-moz-text-overflow is now useful, but rather an illusion, when a browser developer decides to support a property that is not yet recognized in the browser, it is generally preceded by the attribute-xxx-, which indicates that this is a property owned by the browser, and of course, Most of these attributes come from CSS3, and using such a notation may be useful after a browser upgrade.
IE, Firefox, opera and safari support for CSS styles important and *
1, IE6, IE7 all support *, but IE8 finally return to the Orthodox, give up the support of *
2, IE7, IE8, Firefox, Opera, Safari all support important
Important, the priority of the high-level. To illustrate:
Body
{
Background-color: #FF0000!important;
*background-color: #00FF00!important;
*background-color: #0000FF;
Background-color: #000000;
}
IE6 Choose the last one, namely: Background-color: #000000; (because IE6 does not support important)
IE7 Select the second, namely: Background-color: #00FF00; (because IE7 began to support important, but also cling to the last version of the emotion, but important does not play a role in priority)
IE8 and Firefox, Opera, Safari Choose the first one, namely: Background-color: #FF0000!important; (IE8 fully supports important while discarding feelings for *)
Add another, underline "_", IE6 support underline, IE7, IE8 and Firefox, Opera, Safari are not support underline.
Version One:
To the margin negative (is the negative value of mathematics inside) values, remove the offset under IE, remove line-height:30px; otherwise there will be a single pixel blank in other browsers:
<!doctype html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>Default</title>
<style>
* {margin:0; padding:0; border:0;}
Body {color: #000; font:12px/1.5 arial;background: #fff;}
. One. Searchbar {width:400px; border:3px solid blue; background: #ccc;}
. One. Inputstyle {width:300px; height:20px; padding:5px; *margin:-1px 0; Background:gray}
</style>
<body>
<div class= "One" >
<form action= "#" method= "POST" class= "Searchbar" >
<table cellpadding= "0" cellspacing= "0" >
<tr>
<TD class= "Search_label" >
<input name= "name" size= "ten" class= "Inputstyle" value= ""/>
</td>
</tr>
</table>
</form>
</div>
</body>
Version two:
Using relative positioning, for different IE browsers, clear offset:
<!doctype html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>Default</title>
<style>
* {margin:0; padding:0; border:0;}
Body {color: #000; background: #fff;}
. One. Searchbar {width:400px; height:30px; border:3px solid blue; background: #ccc;}
. One. Inputstyle {width:300px; height:20px;line-height:20px; padding:5px; background:gray; position:relative;*top:- 1PX;_MARGIN-BOTTOM:-2PX}
</style>
<body>
<div class= "One" >
<form action= "#" method= "POST" class= "Searchbar" >
<table cellpadding= "0" cellspacing= "0" >
<tr>
<TD class= "Search_label" >
<input name= "name" size= "ten" class= "Inputstyle" value= ""/>
</td>
</tr>
</table>
</form>
</div>
</body>
Inserting a running code interface in a Web pageVersion three: Clear floating
In fact, there are some details, such as Font-size/font-family/line-height, and so on, these are different in the browser, for input.
Simple version:
<textarea name= "Cont" cols= "rows=" "id=" ></textarea>
<input type= "button" Name= "Submit" value= "Run Code" onclick= "RunCode ()" >
<script language= "JavaScript" >
function RunCode () {
var Code=cont.value;
var newwin=window.open (', ', ', ');
Newwin.opener=null
Newwin.document.write (Code);
Newwin.document.close ();
}
</script>
Nice spot:
<script>
var useragent = Navigator.userAgent.toLowerCase ();
var Is_opera = useragent.indexof (' opera ')! =-1 && opera.version ();
var Is_saf = useragent.indexof (' AppleWebKit ')! =-1 | | Navigator.vendor = = ' Apple computer, Inc. ';
var IS_WEBTV = useragent.indexof (' WebTV ')! =-1;
var Is_ie = (useragent.indexof (' msie ')! =-1 &&!is_opera &&!is_saf &&!IS_WEBTV) && user Agent.substr (Useragent.indexof (' msie ') + 5, 3);
function RunCode (obj) {
var winname = window.open (', ' _blank ', ');
Winname.document.open (' text/html ', ' replace ');
Winname.opener = null; Prevent the code from talking about page modification
Winname.document.write (Obj.value);
Winname.document.close ();
}
function Savecode (obj) {
var winname = window.open (', ' _blank ', ' top=10000 ');
Winname.document.open (' text/html ', ' replace ');
Winname.document.write (Obj.value);
Winname.document.execCommand (' SaveAs ', ' ', ' code.htm ');
Winname.close ();
}
function Copycode (obj) {
if (Is_ie && obj.style.display! = ' None ') {
var rng = Document.body.createTextRange ();
Rng.movetoelementtext (obj);
Rng.scrollintoview ();
Rng.select ();
Rng.execcommand ("Copy");
Rng.collapse (FALSE);
}
}
</script>
<textarea Id=code cols=80 rows=15>jldjlfdjfldjlfkdjlk</textarea>
<br/>
<input type= "button" Onclick=runcode (code) value= "Run Codes" style= "border:1px solid #B1B4CD; background: #696D81; color: #FFFFFF; padding-top:5px; " > <input type= "button" Onclick=copycode (code) style= "border:1px solid #B1B4CD; background: #696D81; color: #FFFFFF ; padding-top:5px; " value= "Copy Code" onclick= "Copycode (runcode3)" > <input type= "button" Onclick=savecode (code) style= "BORDER:1PX Solid #B1B4CD; background: #696D81; color: #FFFFFF; padding-top:5px; " Value= "Save Code" onclick= "Savecode (runcode3)" > Tip: You can modify some of the code before running
<br>
CSS in different browser compatibility issues, margin offset/offset overflow, etc.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
