`

padding在FF、IE、Opera中解释不同的解决方法

    博客分类：
  • CSS
IEOpera浏览器HTML 
阅读更多

第一种方法用浏览器兼容性解决方法，关于浏览器兼容识别标识请查看同分类中的另外一篇文章。

第二种方法取消IE中的quriks mod（兼容模式），方法：

例:height:22px;
 padding-top:4px;

指定dtd的链接，ie会执行quriks mod（兼容模式），这时它的盒模型解析是和ie5一样的，即height=22，而非w3c规定的内容宽度width=22+4

解决方法：把<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

改成

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">；

 

另外IE6双倍边距bug

当页面内有多个连续浮动时，如本页的图标列表是采用左浮动，此时设置li的左侧margin值时，在最左侧呈现双倍情况。如外边距设置为10px，而左侧则呈现出20px，解决它的方法是在浮动元素上加上display:inline;的样式，这样就可避免双倍边距bug
分享到：
| Powerdesigner连接Mysql数据库配置图解
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    web前端规范之CSSHack[总结].pdf

    在Web开发中，CSS Hack是一种解决不同浏览器对CSS样式解析不一致问题的方法。由于历史原因和技术差异，各种浏览器，尤其是IE系列和基于Webkit内核的浏览器，对CSS的解析和渲染方式有所不同，导致页面在不同浏览器上...

    个人CSS设计兼容性问题总结教程

    本文将根据提供的内容，详细讲解一些常见的CSS设计在不同浏览器，特别是IE6-8中的兼容性问题及解决方案。 首先，我们关注的是按钮的兼容性问题。在IE6中，按钮元素可能会对后续元素产生额外影响，因此我们需要初始...

    同浏览器CSS样式兼容问题

    除了上述方法，还可以考虑使用CSS前缀，如`-webkit-`、`-moz-`、`-ms-`、`-o-`等，这些前缀分别对应Chrome/Safari、Firefox、IE和Opera浏览器，以确保特定CSS功能在各个浏览器中的兼容性。 此外，使用CSS预处理器...

    浏览器兼容问题

    **问题描述**：在 FF、Opera 和 Chrome 中，`div` 内嵌套 `&lt;p&gt;` 标签时，顶部和底部会出现空白行，但在 IE 下不会出现。 **解决方案**： 1. **设置 `margin` 为 0**： ```css .paragraph { margin: 0; } ``` ...

    css浏览器兼容问题

    在IE6-7中，设置`text-align: center`会使文本及嵌套块元素居中，但在FF、Opera、Safari、IE8中，只有文本居中。为使块元素居中，应使用`margin: 0 auto;`。 3. **垂直居中问题**： `vertical-align: middle;`在...

    web前端规范之CSSHack.pdf

    在过去的几年中，浏览器市场主要分为两大阵营：IE阵型和Webkit阵型。IE阵型包括由微软开发的IE6、IE7、IE8、IE9，以及基于这些内核扩展的国内浏览器如360、搜狗、遨游等。Webkit阵型则涵盖Firefox、Chrome、Safari和...

    div+CSS 兼容小摘

    上述代码段使用了IE特有的条件注释，可以针对性地加载不同的CSS文件来解决IE7和IE6及其以下版本的兼容性问题。 #### 三、浏览器对实际像素的解释差异 - **IE/Opera**：对象的实际宽度 = (margin-left) + width + ...

    ie7+背景透明文字不透明超级简单的实现方法

    在IE7及更高版本、Firefox 3.0+、Opera 10+、Chrome和Safari等现代浏览器中，这一需求可以通过使用PNG32格式的透明图片来轻松解决。然而，在IE6中，由于对PNG8透明支持的限制，通常需要借助滤镜，但滤镜可能导致其他...

    关于ol和ul的padding和margin默认值

    在《CSS Mastery》一书的第5章中，作者说IE和Opera使用margin-left来缩进列表，而Safari和Firefox使用padding-left。经过我的实际测试，发现Opera 9（我实测的是Opera 9.23）同FF和Safari一样，也是使用padding-left...

    clientHeight

    - **Opera**: 在某些版本中，其行为类似于IE，在其他版本中，其行为类似于Firefox。 ### 示例代码 以下是一些常用的JavaScript代码片段，用于获取页面元素的不同尺寸： ```javascript // 获取body的可视宽度 var ...

    第四章 网页边框和网页文字阴影.docx

    本章节主要讲解网页边框和网页文字阴影的知识点，涵盖了 CSS2 和 CSS3 中的阴影效果，以及不同浏览器对阴影效果的支持情况。 一、阴影的历史发展 阴影的概念从 CSS2 就开始有了，但是只有 Safari 一个浏览器支持它...

    Js中关于top、clientTop、scrollTop、offsetTop.pdf

    例如，IE、Opera 认为 offsetHeight 是包括边框和padding 的高度，而 NS、FF 认为是可视区域的高度。因此，在编写 JavaScript 代码时需要考虑这些差异。 理解 top、clientTop、scrollTop、offsetTop 等属性是非常...

    CSS3伪三维径向圆形按钮

    在实际项目中，你可以根据需求调整颜色、大小、阴影等参数，以适应不同的设计风格。在提供的压缩包文件中，`16sucai_com.css`很可能是包含上述样式代码的文件，`index.html`是展示这些按钮的网页，而`一流素材网....

    CSS 实现未知内容高度的垂直水平居中(改良版)

    还好网上也有很多高人发布了一些解决的方法！这里我进行了一些改良，兼容FF，IE6，IE7，Opera…如发现问题有劳回复评论！ 复制代码代码如下:&lt;mce&gt;&lt;!– *{margin:0;padding:0;border:none;font:12px Verdana,”...

    javascript表格控件：Chgrid，简化型

    1：支持自定义排序 2：支持列宽度的拖放 3：支持自定义函数 4：支持分页 5：支持自动编号 6：多浏览器支持，支持ie6,ie7,ff,opera 7：div布局 已知问题： 1：由于使用的div布局，如果使用margin或者padding会改变...

    interviewee-web&java

    CSS Hack是一种技术手段，用于解决不同浏览器对CSS的支持差异问题。主要有以下几种类型： - **条件Hack**：仅适用于Internet Explorer浏览器。 ```html &lt;!--[if IE]&gt; .test { color: red; } &lt;![endif]--&gt; ...

    ExtAspNet v2.2.1 （2009-4-1） 值得一看

    +PageManager的实例方法AddAjaxUpdateControl改名为AddAjaxAspnetControls，现在可以在Page_Load中设置需要在AJAX中需要更新的Asp.net控件了。 -在Page_Load中设置了哪些需要在AJAX中更新的Asp.net控件会在回发时...

    标签增加CSS的overflow属性来清除浮动

    这种方法的优点是它在Firefox (FF)，Opera (OP) 和 Internet Explorer 7 (IE7) 及以上版本中都得到良好支持，提供了更好的浏览器兼容性。 在上述示例中，我们可以看到一个包含多个浮动`&lt;li&gt;`元素的`&lt;ul&gt;`列表。`ul`...

    !DOCTYPE声明对JavaScript的影响分析

    对于像FF、Opera、Chrome和Safari这些浏览器，在无滚动条时，获取的clientWidth和clientHeight值与IE和Opera浏览器不同，因为它们会将元素的边框宽度包含在内。 对于不定义DOCTYPE或者仅定义为&lt;!DOCTYPE&gt;的情况，...

Magicbox
Global site tag (gtag.js) - Google Analytics