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的描述是这样的：

语法：

vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length

取值：

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溢出等的更多相关文章

  1. 在不同的浏览器使用不同的css样式,解决浏览器兼容问题

    区别IE6与FF:       background:orange;       *background:blue; 区别IE6与IE7:       background:green !import ...

  2. 浅谈CSS hack（浏览器兼容）

    今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu. ...

  3. CSS Hack (各个浏览器兼容的问题)

    写css样式的时候,恐怕最头疼的就是各个浏览器下的兼容性问题,即css hack,明明感觉应该是对的,但是就是出不来效果,我根据平时所接触的,总结一下关于兼容 性的技巧,希望可以对大家有所帮助…… C ...

  4. 利用IE/FF的不同识别CSS来使用浏览器兼容问题

    区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue ...

  5. JS和CSS的多浏览器兼容(2)

    2.Css的浏览器兼容性 方法一,根据不同的浏览器加载不同的css file <!DOCTYPE html>  <html> <head> <title> ...

  6. 【css老版本浏览器兼容利器】ie-css3.htc

    做前端的同学都应该听说或者用过,是一段脚本,可以让ie实现css3里的圆角和阴影效果. css带来的便利是很容易感受的到的,但恶心的是它在ie下的不兼容,所以某位牛人现身写了个ie-css3.htc, ...

  7. JS和CSS的多浏览器兼容(3)

    3.Javascript的浏览器兼容性问题 3.1 集合类对象问题说明:IE下,可以使用()或[]获取集合类对象; Safari及Chrome下,只能使用[]获取集合类对象. 解决方法:统一使用[]获 ...

  8. JS和CSS的多浏览器兼容(1)

    1.指定文件在IE浏览器中的兼容性模式 要为你的网页指定文件模式,需要在你的网页中使用meta元素放入X-UA-Compatible http-equiv 标头.以下是指定为Emulate IE7 m ...

  9. css自动添加浏览器兼容前缀 autoprefixer设置

    Autoprefixer设置: preferences>key Bindings-Users {"keys":["ctrl+alt+x"],"c ...

随机推荐

  1. View模版的设计

    一个Action多套View模版的设计   回到目录 模块化 这个问题是在做模块化设计时出现的,在Lind.DDD.Plugins模块里,需要对应的模块实体,模块管理者,模块标识接口等,开发时,如果你 ...

  2. JavaScript string array 数组

    Array类可以如下定义: var aValues = new Array(); 如果预先知道数组的长度,可以用参数传递长度 var aValues = new Array(20); -------- ...

  3. win8 telnet VirtualBox中的redhat9

    1. VirtualBox设置网络连接为“桥接网卡”,并且此网卡要为win8正在使用的网卡(比如我的电脑上使用的就是无线网卡,则选择网卡时也要用无线网卡) 2. 在redhat的终端里,运行ifcon ...

  4. Spring中HibernateCallback的用法(转)

    Hibernate的复杂用法HibernateCallback HibernateTemplate还提供一种更加灵活的方式来操作数据库,通过这种方式可以完全使用Hibernate的操作方式.Hiber ...

  5. matlab字符串操作总结

    matlab字符串操作总结 字符串操作总结 char(S1,S2,…)利用给定的字符串或单元数组创建字符数组double(S)将字符串转化成ASC码形式cellstr(S)利用的给定的字符数组创建字符 ...

  6. Web应用中的轻量级消息队列

    Web应用中为什么会需要消息队列?主要原因是由于在高并发环境下,由于来不及同步处理,请求往往会发生堵塞,比如说,大量的insert,update之类的请求同时到达mysql,直接导致无数的行锁表锁,甚 ...

  7. 01-08-04【Nhibernate (版本3.3.1.4000) 出入江湖】二级缓存：NHibernate自带的HashtableProvider之命名缓存

    http://www.cnblogs.com/lyj/archive/2008/11/28/1343418.html 可以在映射文件中定义命名查询,<query>元素提供了很多属性,可以用 ...

  8. 【锋利的JQuery-学习笔记】添加提示图片

    效果图: hot图片: (注意:这个图标本身就有抖动效果的,并不是由于标签<del>而具有抖动效果) 周期性抖动,起到提示的作用 html: <div class="jnC ...

  9. Consumer closed input channel or an error occurred. events=0x8 channel is unrecoverably broken and will be disposed(待解决)

    跟文件读取有关?关闭文件读取试试. 有可能是读取文件 出现报错

  10. Unity3D脚本中文系列教程(七)

    http://dong2008hong.blog.163.com/blog/static/4696882720140311445677/?suggestedreading&wumii Unit ...