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. 0x01第一个汇编程序

    ;将由text db 10,20,30,40定义的4个数相加,并输出其和. .386    ;指明指令集 .model flat,stdcall ;平坦模式,函数右边的参数先入栈 option cas ...

  2. eclipse的android智能提示设置

    eclipse的android智能提示设置 分类: android 技术2011-12-07 23:13 3069人阅读 评论(0) 收藏 举报 eclipseandroidtriggersjavaf ...

  3. Team Homework #1 学长“学霸英语学习软件”试用

    简介: 一款英语单词记忆和管理辅助软件. 基本功能: 内置GRE词汇及其常考形态.Webster英语解释 单词发音功能 单词测验模式 简易词典功能 基本界面 词库单词读取 单词测试 优点: 1.界面简 ...

  4. Codeforces Round #302 (Div. 2) D. Destroying Roads 最短路

    题目链接: 题目 D. Destroying Roads time limit per test 2 seconds memory limit per test 256 megabytes input ...

  5. 【模板】Big-Step-Giant-Step 大步小步

    求一个 的最小整数解 bsgs 当h是质数的时候使用 extbsgs 不满足上面那种情况的时候 具体参见http://tonyfang.is-programmer.com/posts/178997.h ...

  6. 无废话网页重构系列——（7）布局(区块、栅格)、模块组件(module)

    本文作者:大象本文地址:http://www.cnblogs.com/daxiang/p/4654800.html 在构建HTML主干结构后,开始编写“页面布局”和“模块组件”: 页面框架由几个主干结 ...

  7. Windows 进程通信 之 DDE技术

    DDE (Dynamic Data Exchange,DDE)动态数据交换,是一种进程间通信机制,它最早是随着Windows由微软提出的.当前大部分软件仍旧支持DDE,但最近十年里微软已经停止发展DD ...

  8. 解决unity3d发布的网页游戏放到服务器上无法使用的问题

    http://www.unity蛮牛.com/blog-2429-1226.html 第一次把unity3d发布的网页游戏放到服务器上(Win2003),发现无法使用.可以尝试以下办法.       ...

  9. Eclipse下如何导入jar包

    原地址:http://blog.csdn.net/justinavril/article/details/2783182 我们在用Eclipse开发程序的时候,经常想要用到第三方的jar包.这时候我们 ...

  10. What is the difference between Views and Materialized Views in Oracle?

    aterialized views are disk based and update periodically base upon the query definition. Views are v ...