CSS在不同浏览器兼容问题,margin偏移/offset溢出等

时间：2015-11-01 17:48:11 阅读：336 评论：0 收藏：0 [点我收藏+]

标签：

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溢出等

标签：

原文地址：http://www.cnblogs.com/tian830937/p/4928137.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行