margin在垂直取值时取最大值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>margin在垂直取值时取最大值</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>
</head>

<body>
<div class="a">我的上下margin值是30px</div>
<div class="b">我的上下margin值是50px<br />
<br />
在但我们两个之间的空间只有50px而不是80px哟～～</div>
</body>
</html>

ul li高度在ie6、ie7、ie8、FF下兼容问题解决

在页面中有时候使用ul li列表时ie6、ie7、ie8、FF的高度会不一样(其中ie6与ie7高度一样，ie8与FF高度一样)，设置高后使用overflow:hidden;也无济于事，这个问题一直困扰着我，以至于我后来只能使用DIV来做列表，但是这样只能说是对付上的，但没从实际上解决这个问题。

后来在网上找到了一个方法，在li样式上加上vertical-align:bottom便解决了，但原因还是不理解，希望看到的朋友能给个合理的解释，谢谢!

我查了下CSS帮助文档，里面对vertical-align的描述是这样的：

语法：

取值：

auto :　CSS1 根据 layout-flow 属性的值对齐对象内容

baseline :　CSS1 默认值。将支持 valign 特性的对象的内容与基线对齐

sub :　CSS1 垂直对齐文本的下标

super :　CSS1 垂直对齐文本的上标

top :　CSS1 将支持 valign 特性的对象的内容对象顶端对齐

text-top :　CSS1 将支持 valign 特性的对象的文本与对象顶端对齐

middle :　CSS1 将支持 valign 特性的对象的内容与对象中部对齐

bottom :　CSS1 将支持 valign 特性的对象的内容与对象底端对齐

text-bottom :　CSS1 将支持 valign 特性的对象的文本与对象顶端对齐

length :　CSS2 由浮点数字和单位标识符组成的长度值 | 百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0，对于百分数来说就是0%。请参阅长度单位。目前IE尚未实现此参数

说明：

设置或检索对象内容的垂直对其方式。

对于 currentStyle 对象而言此属性的默认值为 auto 。对于其他对象而言是 baseline 。

此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

对应的脚本特性为 verticalAlign 。

关于IE8 css margin 益处问题

IE6/IE7/IE8/Firefox的CSS各种兼容margin问题解决办法
来源：互联网
作者：佚名
时间：07-04 17:00:51
 
点评：IE6/IE7/IE8/Firefox的CSS各种兼容margin问题解决办法，需要的朋友可以参考下。确实不错。
外置 
.main{ float:left;#float:none;_float:none; 
html*.main 
*+html .main 
* html .main 
第1行给Firefox以及其他浏览器看 
第2行给safari/IE6/iE7看，如果safari/IE6/iE7 视觉效果不统一，就要在后面跟IE6/IE7的定义 
第3行给IE7看 
第4行给IE6以及更老的版本看 
内置 
.main 
第1个float给Firefox以及其他浏览器看 
第2个加#的float给IE7看 
第3个加_的float给IE6以及更老的版本看 
第4个加[的float给safari看 
第5个加]的float给IE看 
各种常见浏览器使用的内核 (Rendering Engine) 
Mozilla Firefox ( Gecko ) 
Internet Explorer ( Trident ) 
Opera ( Presto ) 
Konqueror ( KHTML ) 
Safari Swift ( WebKit ) 
用css自动隐藏超出宽度内容并省略显示，浏览器兼容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; 
基本非IE的浏览器的私有属性都会以-xxx-这样开始， 
-o-就是以Presto为引擎的 Opera私有的、 
-icab-是iCab私有的， 
-khtml-就是以KHTML为引擎的浏览器（如Konqueror Safari）、 
-moz-就是以mozilla的Gecko为引擎的浏览器（如Firefox，mozilla）、 
-webkit-就是以Webkit 渲染引擎（是KHTML的衍生产品）的浏览器（如Safari、Swift）。 
并不是说像-moz-text-overflow现在有用，而是一个幻想的写法，当一个浏览器的开发人员决定在浏览器支持一种还没得到公认的属性时，一般 都会在属性的前面加上-xxx-这种，表明这种是属于该浏览器私有的属性，当然，这些属性多数来自CSS3的，使用这样的写法在浏览器升级后也许才有作 用. 
IE、Firefox、Opera和Safari对CSS样式important和*的支持 
1、IE6、IE7都支持 *，但IE8终于回归正统，放弃了对*的支持 
2、IE7、IE8、Firefox、Opera、Safari都支持 important 
顾名，important的优先级要高. 举例说明： 
 
body 
{ 
background-color:#FF0000 !important; 
*background-color:#00FF00 !important; 
*background-color:#0000FF; 
background-color:#000000; 
} 
 
IE6选择最后一个，即：background-color:#000000; （因为IE6对important不支持） 
IE7选择第二个，即：background-color:#00FF00;（因为IE7开始对important支持了，同时还死守着它对 * 感情的最后一版本，但important并未起到优先级的作用） 
IE8和Firefox、Opera、Safari选择第一个，即：background-color:#FF0000 !important;（IE8完全支持于important，同时丢弃了对*的感情） 
另外再补充一个，下划线”_“,IE6支持下划线，IE7、IE8和Firefox、Opera、Safari均不支持下划线。

关于IE6/7表单偏移问题

版本一：
给margin负(是数学里面负数的负)值，清除IE下的offset，去掉 line-height: 30px;不然其他浏览器里面也会有个一像素的空白：

<!doctype html>
<html>
<head>
<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>
</head>
<body>
<div class="one">
<form action="#" method="post" class="SearchBar">
  <table cellpadding="0" cellspacing="0">
    <tr>
        <td class="search_label">
            <input name="name" size="10" class="inputstyle" value="" />
        </td>
    </tr>
  </table>
</form>
</div>
</body>
</html>

版本二：
利用相对定位，针对不同的IE浏览器，清除offset：

<!doctype html>
<html>
<head>
<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>
</head>
<body>
<div class="one">
<form action="#" method="post" class="SearchBar">
  <table cellpadding="0" cellspacing="0">
    <tr>
        <td class="search_label">
            <input name="name" size="10" class="inputstyle" value="" />
        </td>
    </tr>
  </table>
</form>
</div>
</body>
</html>

版本三：清除浮动
其实还有一些细节问题，比如font-size/font-family/line-height等等，这些在不同的浏览器里面都有所差别，对于input来说。

网页中插入可运行代码界面

简易版:
<textarea name="Cont" cols="50" rows="10" id="Cont"></textarea>
<input type="button" name="Submit" value="运行代码" 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>
 
好看点的:
<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) && userAgent.substr(userAgent.indexOf('msie') + 5, 3);
function runCode(obj) {
         var winname = window.open('', "_blank", '');
         winname.document.open('text/html', 'replace');
winname.opener = null; // 防止代码对论谈页面修改
         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="运行代码" 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="复制代码" onclick="copycode(runcode3)"> <input type="button"onclick=saveCode(code) style="border:1px solid #B1B4CD;background:#696D81;color:#FFFFFF; padding-top:5px;"value="另存代码" onclick="saveCode(runcode3)"> 提示：您可以先修改部分代码再运行   
<br>

CSS在不同浏览器兼容问题,margin偏移/offset溢出等的更多相关文章

在不同的浏览器使用不同的css样式,解决浏览器兼容问题
区别IE6与FF: background:orange; *background:blue; 区别IE6与IE7: background:green !import ...
浅谈CSS hack（浏览器兼容）
今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu. ...
CSS Hack (各个浏览器兼容的问题)
写css样式的时候,恐怕最头疼的就是各个浏览器下的兼容性问题,即css hack,明明感觉应该是对的,但是就是出不来效果,我根据平时所接触的,总结一下关于兼容性的技巧,希望可以对大家有所帮助…… C ...
利用IE/FF的不同识别CSS来使用浏览器兼容问题
区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue ...
JS和CSS的多浏览器兼容(2)
2.Css的浏览器兼容性方法一,根据不同的浏览器加载不同的css file <!DOCTYPE html> <html> <head> <title> ...
【css老版本浏览器兼容利器】ie-css3.htc
做前端的同学都应该听说或者用过,是一段脚本,可以让ie实现css3里的圆角和阴影效果. css带来的便利是很容易感受的到的,但恶心的是它在ie下的不兼容,所以某位牛人现身写了个ie-css3.htc, ...
JS和CSS的多浏览器兼容(3)
3.Javascript的浏览器兼容性问题 3.1 集合类对象问题说明:IE下,可以使用()或[]获取集合类对象; Safari及Chrome下,只能使用[]获取集合类对象. 解决方法:统一使用[]获 ...
JS和CSS的多浏览器兼容(1)
1.指定文件在IE浏览器中的兼容性模式要为你的网页指定文件模式,需要在你的网页中使用meta元素放入X-UA-Compatible http-equiv 标头.以下是指定为Emulate IE7 m ...
css自动添加浏览器兼容前缀 autoprefixer设置
Autoprefixer设置: preferences>key Bindings-Users {"keys":["ctrl+alt+x"],"c ...

随机推荐

oracle中事务处理
事务用于保证数据的一致性,它由一组相关的dml语句组成,该组的dml语句要么全部成功,要么全部失败. 事务和锁当执行事务操作时(dml语句),oracle会在被作用的表上加锁,防止其它用户改表的结构 ...
std::function赋值的几种方法
定义: #include <functional> std::function<void(const QString&)> myPrintFunction; 函数指针 ...
【BZOJ】【3093】【FDU校赛2012】A Famous Game
概率论神题不会捉啊……挖个坑先 orz 贾教 & QuarterGeek /********************************************************* ...
Java多线程——<二>将任务交给线程，线程声明及启动
一.任务和线程 <thinking in java>中专门有一小节中对线程和任务两个概念进行了具体的区分,这也恰好说明任务和线程是有区别的. 正如前文所提到的,任务只是一段代码,一段要达成 ...
Unity3D脚本中文系列教程(七)
http://dong2008hong.blog.163.com/blog/static/4696882720140311445677/?suggestedreading&wumii Unit ...
地图索引 R-tree
http://blog.csdn.net/v_JULY_v/article/details/6530142 984年,加州大学伯克利分校的Guttman发表了一篇题为“R-trees: a dynam ...
Ubuntu环境下手动配置ant
配置ant 1. 下载ant(http://ant.apache.org/bindownload.cgi) 例如我下载的是:apache-ant-1.9.4-bin.tar.gz 解压ant,将文件夹 ...
李洪强iOS开发之 - 实现九宫格并使用SDWebImage下载图片
李洪强iOS开发之 - 实现九宫格并使用SDWebImage下载图片源码: // // ViewController.m // 08-九宫格扩展 // // Created by 李洪强 ...
EXCEL排序
题目描述: Excel可以对一组纪录按任意指定列排序.现请你编写程序实现类似功能. 对每个测试用例,首先输出1行“Case i:”,其中 i 是测试用例的编号(从1开始).随后在 N ...
龙芯将两款 CPU 核开源，这意味着什么？
10月21日,教育部计算机类教学指导委员会.中国计算机学会教育专委会将2016 CNCC期间在山西太原举办“面向计算机系统能力培养的龙芯CPU高校开源计划”活动,在活动中,龙芯中科宣布将GS132和G ...