`
hm4123660
  • 浏览: 282501 次
  • 性别: Icon_minigender_1
  • 来自: 广州
博客专栏
Dea4ce76-f328-3ab2-b24a-fb268e1eeb75
数据结构
浏览量:70023
社区版块
存档分类
最新评论

div盒子宽度高度兼容性

阅读更多

 

 



 

 div盒子设置宽度和高度后,在IE浏览器和非IE浏览器(如火狐,满足W3C标准)会差生不兼容,ie

 浏览器的宽度和高度包括border和padding的宽度和高度,而火狐等满足W3C标准的非IE浏览器

的宽度和高度就是内容宽度,不包括border和padding

 

解决方法

width:250px  !important;

width:300px;

当含有两个同一属性时,会使用后面一个属性的值。由于IE会忽略!important,所以他会使用后面的300px;此时ie的宽度为300-5-5-20-20=250;

非IE浏览器的!important优先级高于后面的,此时会使用width:250px.

这时,他们的宽度就相等了

 

  • 大小: 86.3 KB
分享到:
评论

相关推荐

    div盒子究竟占多大面积实际的宽度高度如何计算

    在网页设计中,`div`元素是最常用的布局...总结起来,理解`div`盒子的宽度和高度计算不仅涉及到CSS的基础知识,还与页面布局、响应式设计和浏览器兼容性紧密相关。掌握这些概念有助于创建更加灵活和适应性强的网页。

    Arry精英战队Div盒子模型Arry老师学习教案.pptx

    本篇文章将根据“Arry精英战队Div盒子模型Arry老师学习教案”中的内容,深入解析CSS盒子模型的基本概念、组成部分及其应用技巧。 #### 二、CSS盒子模型概述 **CSS盒子模型**是指用于描述HTML元素如何显示并放置到...

    郜振宇php职业培训系列讲座009:div盒子模型与内外边距精讲.rar

    本讲座“郜振宇php职业培训系列讲座009:div盒子模型与内外边距精讲”着重讲解了两个核心的CSS概念:盒子模型和内外边距,这对于构建响应式、标准化的网页布局至关重要。 首先,让我们深入理解盒子模型。在Web设计...

    IE和谷歌浏览器下div宽度不一致的问题解决.txt

    4. **CSS兼容性问题**:某些CSS属性或属性值在不同浏览器中的支持程度不一,如IE对某些CSS3特性的支持不如Chrome等现代浏览器全面。 #### 解决方案 为了确保DIV元素在IE和Chrome等浏览器中能够一致地显示,可以...

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    在网页布局设计中,我们经常会遇到这样一个问题:当一个元素(如`div`)的宽度设置为`width: 100%`时,如果再添加`padding`或`margin`,元素的总尺寸会超出其父元素的宽度,导致布局混乱。为了解决这一问题,我们...

    浏览器兼容性问题

    - **问题描述**:在不同浏览器中,为元素设置宽度和高度时可能出现兼容性问题。 - **解决方法**:建议使用CSS来控制元素的尺寸,避免使用JavaScript直接修改元素的宽度和高度。 #### CSS兼容性问题 ##### 1. ...

    三栏布局--左右宽度固定,中间自适应宽度

    3. **兼容性**:需要注意的是,绝对定位可能会导致一些浏览器兼容性问题,特别是当涉及到响应式设计时。 ### 总结 以上三种方法都可以实现三栏布局中左右宽度固定、中间自适应宽度的效果。其中,设置浮动的方法...

    两个DIV同一行显示

    2. **兼容性**:Flexbox和Grid布局在较新的浏览器中表现良好,但在一些旧版本浏览器中可能不支持。在项目中使用这些技术时,应考虑到目标用户的浏览器环境。 3. **响应式设计**:无论采用哪种布局方式,都应该考虑到...

    DIV+CSS之弹性盒模型布局

    在前端开发中,布局设计是...总的来说,“DIV+CSS之弹性盒模型布局”是一种强大的前端布局技术,能够帮助开发者构建出更加灵活和适应性的用户界面。掌握并熟练运用Flexbox,将极大地提升我们的前端开发效率和代码质量。

    盒子模型剖析

    通过本文的学习,我们了解了盒子模型的基本概念及其组成部分,并探讨了不同类型的盒子模型以及如何解决盒模型带来的兼容性问题。理解和掌握盒子模型对于学习CSS布局至关重要,希望本文能够帮助大家打下坚实的基础。

    div css 基础教材

    `Div`的定义很简单:`<div></div>`,它是一个块级元素,意味着它默认会占据整个宽度并换行显示。 2. **CSS简介** CSS是用于控制网页外观和布局的样式语言。通过CSS,我们可以改变字体、颜色、布局、动画等,实现...

    tudou.rar_DIV_DIV CSS_tudou

    通过CSS,我们可以为Div设置宽度、高度、边距和内边距,以实现各种布局效果。在仿制土豆网首页时,我们将使用多个Div元素来划分各个部分,如导航栏、轮播图、内容区域等。 三、CSS+Div布局技巧 1. 定位...

    CSS兼容性问题解决方案[归类].pdf

    CSS 兼容性问题解决方案 本文档旨在解决 CSS 中的兼容性问题,涵盖了多个方面的解决方案,包括 DOCTYPE 的影响、盒模型的解释不一致、ul 和 ol 列表缩进问题、CSS 透明问题、CSS 圆角问题、cursor 问题、字体大小...

    DIV+CSS布局大全

    由于各浏览器对CSS的支持程度不同,开发者需要了解并处理跨浏览器的兼容性问题。通常借助于工具如Autoprefixer和Normalize.css来辅助解决。 总结,学习《DIV+CSS布局大全》不仅涵盖了HTML布局的基础知识,还涉及到...

    div 2列和3列显示

    在实际项目中,开发者可能会选择使用预处理器(如Sass或Less)和响应式框架来提高效率和兼容性。 压缩包中的`div2and3.html`文件很可能包含了上述示例的HTML代码,用于展示2列和3列布局的实际效果。为了查看和理解...

    ps+div+css打造蓝色后台--login页面设计

    通过分析标题、描述以及部分给定内容,“ps+div+css打造蓝色后台--login页面设计”涉及的关键知识点包括Photoshop中的界面设计、切片技术、兼容性考虑、百分比布局的实现,以及从设计稿到网页的具体转换过程。...

    div+css布局大全

    通过设置div的宽度、高度、内边距和外边距,可以创建各种复杂的布局模式。理解div如何作为容器容纳其他元素,并通过CSS进行定位和布局,是学习网页设计的重要步骤。 3. **盒模型**:CSS2的盒模型是理解div布局的...

    Div+css页面布局资料(很好很强大)

    ### CSS盒子模型与Div+CSS...相比于传统的表格布局方法,CSS布局提供了更多灵活性和可扩展性,同时还能提高页面加载速度并增强跨浏览器兼容性。因此,掌握CSS盒子模型和Div+CSS布局技巧对于现代Web开发者来说至关重要。

Global site tag (gtag.js) - Google Analytics