IE6中用了float:left之后导致margin-left加倍

最新推荐文章于 2025-12-05 07:37:55 发布
转载 最新推荐文章于 2025-12-05 07:37:55 发布 · 503 阅读 · 0
文章标签：

#float #ie #border #div #css

本文探讨了在Internet Explorer 6浏览器中，当元素设置了浮动(float)和左外边距(margin-left)时出现的显示异常问题。文中提供了一个简单的解决方案：通过将display属性设置为inline来修正IE6解释上的偏差。
先看css代码:
理解固化的Maven依赖：spring-boot-starter-parent 与 spring-boot-dependencies
私聊前往站内信：https://i.youkuaiyun.com/#/msg/chat/weixin_44976692
05-03 2万+
是Spring Boot项目的Maven父项目（POM），它提供了一系列默认的配置和依赖管理，用于简化Spring Boot应用程序的构建和管理。是Spring Boot提供的另一个重要的Maven项目，用于集中管理所有Spring Boot相关依赖的版本信息。和有了更深入的了解。合理地使用这两个父项目，可以帮助我们更加高效地构建和管理Spring Boot应用程序，提高项目的可维护性和稳定性。
uniapp之uview swiper组件报错 Error in v-on handler: “TypeError: Cannot read property ‘left‘ of undefined“
YZRHANYU的博客
11-21 2977
uniapp之uview swiper组件报错 Error in v-on handler: “TypeError: Cannot read property ‘left‘ of undefined“
IE 和 Firefox 下 CSS 中 margin-left IE显示为两倍的解决
weixin_30572613的博客
05-05 134
IE 和 Firefox 下 CSS 中 margin-left IE显示为两倍的解决 时间:2009-08-19 16:25来源:未知 作者:admin 点击: 93次 另：当使用margin属性不能正确显示时，尝试使用display:inline;看能否解决问题 问题描述一个html页<div style="width:190px; margin-left:10px; overflow...
float元素浮动后高度不一致导致错位的解决办方法
一直很安静
04-19 1万+
1、给父元素定义font-size:0; 浮动子元素定义需要的font-size， 再定义display:inline-block;vertical-align:top;
IE7的web标准之道——7：（修正）float双倍margin bug
word_ppt的专栏
04-19 559
IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不停的上升，微软终于推出了IE7。但IE7是否真的能够力挽狂澜，是否真的能够得到用户的信任，是否真的能够得到网页设计者的认可呢？ 且看《IE7的web标准之道》系列文章，和你一起见证IE7的改变！ 原来你这么出名呀！ 这个又是IE6中非常著名的
DIV+CSS：Margin和Padding属性[转载]
aziyywg3619的博客
11-30 253
DIV+CSS：Margin和Padding属性[转载] margin和padding用来隔开元素，margin是隔开元素与外边，padding是隔开元素里边。 margin: 包括margin-top、margin-right、margin-bottom、mar...
IE6浏览器兼容问题及部分解决方案
agpp49986的博客
02-10 251
作为一个初涉前端技术的IT菜鸟，IE浏览器的兼容问题是一个不得不跨越的坎。为了能够在不同浏览器达到同样的显示效果，就不得不花心思想出办法实现兼容。由于各大主流浏览器内核不同，各自的实现标准有所差异，因此同样的CSS样式表可能无法同时适应其它的浏览器，特别是IE6更是让人感觉崩溃。因此就需要用到CSS HACK技术。（针对不同浏览器写不同的CSS代码） 兼容IE6的第一步就是单独对IE进...
关于css部份技巧, div在IE6/IE7/IE8/FF 不同浏览器 中的效果兼容
☜ 我追求的天空 ☞┅┅┅┅┅﹣·☆
09-02 1444
关于 css 部份 技巧, div IE6 IE7 IE8 FF 不同 浏览器 中的 效果 兼容
DIV+CSS浏览器兼容问题
德仔
07-10 2204
IE6能识别*和_，但不能识别 !important,  IE7能识别*，也能识别!important,不能识别_;  FF不能识别*和_，能识别!important; 所以可以这样来区分IE6，IE7，firefox  : background:orange;*background:green;_background:blue;  注：书写的顺序都是firefox的写在前面，IE7的写
火狐与IE浏览器之间的一些差别收集
DJCBPL的专栏
11-26 1087
png透明 AlphaImageLoader filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL) enabled：可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true：默认值。滤镜激活。false：滤镜被禁止。 sizing
CSS学习之道：详细学习CSS的Margin和Padding属性
Java小迷的专栏
10-09 1438
margin和padding用来隔开元素，margin是隔开元素与外边，padding是隔开元素里边。 　　例子h2： h2 {     font-size: 1.5em;     background-color: #ccc;     margin: 1em;     padding: 3em; } 　　元素四边可以设置的属性：margin-top, margin-r
让IE6支持min-width最小宽度
10-30
通过设置特定的CSS属性，例如`_margin-left`、`_zoom:1`、`_position:relative`和`_float:left`，可以在IE6中模拟`min-width`的效果。这段代码创建了两个内部嵌套的div元素，`.ie6-out`和`.ie6-in`，通过对它们的...
对抗学习总结：FGSM-＞FGM-＞PGD-＞FreeAT, YOPO -＞FreeLb-＞SMART-＞LookAhead-＞VAT
热门推荐
weixin_36378508的博客
04-25 1万+
对抗训练基本思想——Min-Max公式 中括号里的含义为我们要找到一组在样本空间内、使Loss最大的的对抗样本（该对抗样本由原样本x和经过某种手段得到的扰动项r_adv共同组合得到）。这样一组样本组成的对抗样本集，它们所体现出的数据分布，就是该中括号中所体现的。 外层min()函数指的则是，我们面对这种数据分布的样本集，要通过对模型参数的更新，使模型在该对抗样本集上的期望loss最小 对抗训练的核心步骤是： 用被对抗性样本污染过的训练样本来训练模型，直到模型能学习到如此类型的抵抗。从而保证模型的安全.
数据结构与算法：Python语言实现--Python入门 数据结构与算法 Python 语言实现 课后答案
storyfull
11-07 1万+
这是《数据结构与算法 Python 语言实现》 （古德里奇）版，每一章书后习题和解答，我已经买了这本书， 因为想在看完每一章后，完成习题，所以记录下来！ 这篇文章是第一章的习题内容！因为题目太长，懒得自己书写，我拍下了习题，并且直接用截图作为题目！
【JavaWeb】CSS_三种引入方式
最新发布
qq_43494013的博客
12-05 402
【JavaWeb】CSS_三种引入方式
DevUI主题系统进阶：CSS-in-JS与暗黑模式无缝切换架构
m0_37613794的博客
12-04 808
本文深入解析了华为DevUI主题系统的混合架构实现方案，提出结合CSS-in-JS灵活性与CSS Variables性能优势的创新设计。核心内容包括：1）主题令牌管理算法，实现语义化到具体值的映射；2）运行时主题切换引擎，支持平滑过渡和状态持久化；3）性能优化策略，包括CSS变量作用域隔离和编译时优化。通过MateChat等大型项目验证，该方案显著提升了主题定制能力，使主题切换时间从300ms降至28ms，样式文件体积减少73%。文章还提供了从原理到实践的全套解决方案，包括React集成、组件适配和常见问题
CSS Animation 详解
Irene1991的博客
12-04 864
本文全面介绍了CSS动画技术，包括基础概念、关键帧规则、动画属性详解及实践示例。主要内容涵盖：1. 核心概念：关键帧(@keyframes)定义动画序列，动画属性控制行为；2. 详细解析8大动画属性及其应用场景；3. 提供加载动画、呼吸灯等5种典型实现示例；4. 性能优化技巧，如使用GPU加速属性；5. 响应式设计方法，包括媒体查询和CSS变量应用；6. 高级技巧如动画事件监听和状态控制；7. 常见问题解决方案和浏览器兼容性处理。文章强调遵循性能最佳实践和可访问性原则，适合开发者系统学习CSS动画技术。
主题切换（2）：CSS 变量（自定义属性）
Z_Wonderful的博客
12-01 1066
系统主题切换。在大型项目中，为了更好地组织 CSS 变量（自定义属性）、主题切换，通常会将变量定义在单独的文件中，然后在需要的地方引入。这样可以实现全局变量的统一管理，同时保持代码的可维护性。
通过js动态更新css变量
qq_65084229的博客
12-02 111
【代码】通过js动态更新css变量。
<style lang="scss" scoped> .el-date-editor.el-input { width: auto; } .add-update-preview .el-form-item /deep/ .el-form-item__label { padding: 0 10px 0 0; color: #999; font-weight: 600; width: 180px; font-size: 16px; line-height: 40px; text-align: right; } .add-update-preview .el-form-item /deep/ .el-form-item__content { margin-left: 180px; } .add-update-preview .el-input /deep/ .el-input__inner { border: 1px solid #e8e8e8; border-radius: 0px; padding: 0 12px; color: #000; width: 100%; font-size: 16px; height: 40px; } .add-update-preview .el-select /deep/ .el-input__inner { border: 1px solid #e8e8e8; border-radius: 0px; padding: 0 12px; color: #000; width: 100%; font-size: 16px; min-width: 50%; height: 40px; } .add-update-preview .el-date-editor /deep/ .el-input__inner { border: 1px solid #e8e8e8; border-radius: 0px; padding: 0 10px 0 30px; color: #000; background: #fff; width: 100%; font-size: 16px; height: 40px; } .add-update-preview /deep/ .el-upload--picture-card { background: transparent; border: 0; border-radius: 0; width: auto; height: auto; line-height: initial; vertical-align: middle; } .add-update-preview /deep/ .el-upload-list .el-upload-list__item { border: 1px solid #e8e8e8; cursor: pointer; border-radius: 0px; color: #666; background: #fff; width: 150px; font-size: 34px; line-height: 150px; text-align: center; height: 150px; } .add-update-preview /deep/ .el-upload .el-icon-plus { border: 1px solid #e8e8e8; cursor: pointer; border-radius: 0px; color: #666; background: #fff; width: 150px; font-size: 34px; line-height: 150px; text-align: center; height: 150px; } .add-update-preview .el-textarea /deep/ .el-textarea__inner { border: 1px solid #e8e8e8; border-radius: 0px; padding: 12px; color: #666; background: #fff; width: 100%; font-size: 14px; min-width: 400px; height: 120px; } .add-update-preview .btn3 { border: 0px solid #ccc; cursor: pointer; border-radius: 4px; padding: 0 10px; margin: 0 10px 0 0; color: #fff; background: #50adfd; width: auto; font-size: 16px; min-width: 110px; height: 40px; } .add-update-preview .btn3:hover { opacity: 0.8; } </style>
09-12
你当前的 `<style>` 块使用了 `lang="scss"` 并且包含 `/deep/`，这是 Vue 2 中用于穿透 `scoped` 样式的一种方式。然而，在 SCSS/Sass 中，`/` 是数学运算符，不是合法的选择器语法，因此会报错。 --- ## ✅ 正确写法（使用 `::v-deep` 替代 `/deep/`） 在 SCSS 中，推荐使用 `::v-deep` 来穿透 `scoped` 样式： ### ✅ 修改后的完整代码如下： ```vue <style lang="scss" scoped> .el-date-editor.el-input { width: auto; } .add-update-preview { ::v-deep .el-form-item .el-form-item__label { padding: 0 10px 0 0; color: #999; font-weight: 600; width: 180px; font-size: 16px; line-height: 40px; text-align: right; } ::v-deep .el-form-item .el-form-item__content { margin-left: 180px; } ::v-deep .el-input .el-input__inner { border: 1px solid #e8e8e8; border-radius: 0px; padding: 0 12px; color: #000; width: 100%; font-size: 16px; height: 40px; } ::v-deep .el-select .el-input__inner { border: 1px solid #e8e8e8; border-radius: 0px; padding: 0 12px; color: #000; width: 100%; font-size: 16px; min-width: 50%; height: 40px; } ::v-deep .el-date-editor .el-input__inner { border: 1px solid #e8e8e8; border-radius: 0px; padding: 0 10px 0 30px; color: #000; background: #fff; width: 100%; font-size: 16px; height: 40px; } ::v-deep .el-upload--picture-card { background: transparent; border: 0; border-radius: 0; width: auto; height: auto; line-height: initial; vertical-align: middle; } ::v-deep .el-upload-list .el-upload-list__item { border: 1px solid #e8e8e8; cursor: pointer; border-radius: 0px; color: #666; background: #fff; width: 150px; font-size: 34px; line-height: 150px; text-align: center; height: 150px; } ::v-deep .el-upload .el-icon-plus { border: 1px solid #e8e8e8; cursor: pointer; border-radius: 0px; color: #666; background: #fff; width: 150px; font-size: 34px; line-height: 150px; text-align: center; height: 150px; } ::v-deep .el-textarea .el-textarea__inner { border: 1px solid #e8e8e8; border-radius: 0px; padding: 12px; color: #666; background: #fff; width: 100%; font-size: 14px; min-width: 400px; height: 120px; } } .add-update-preview .btn3 { border: 0px solid #ccc; cursor: pointer; border-radius: 4px; padding: 0 10px; margin: 0 10px 0 0; color: #fff; background: #50adfd; width: auto; font-size: 16px; min-width: 110px; height: 40px; } .add-update-preview .btn3:hover { opacity: 0.8; } </style> ``` --- ## ✅ 优化建议 你可以利用 SCSS 的嵌套特性来进一步优化结构，使代码更简洁： ```scss .add-update-preview { ::v-deep { .el-form-item { & .el-form-item__label { padding: 0 10px 0 0; color: #999; font-weight: 600; width: 180px; font-size: 16px; line-height: 40px; text-align: right; } & .el-form-item__content { margin-left: 180px; } } .el-input .el-input__inner, .el-select .el-input__inner, .el-date-editor .el-input__inner { border: 1px solid #e8e8e8; border-radius: 0px; padding: 0 12px; color: #000; width: 100%; font-size: 16px; height: 40px; } .el-date-editor .el-input__inner { padding: 0 10px 0 30px; } } } ``` --- ## ✅ 如果你使用的是 Vue 3 在 Vue 3 中，可以使用 `:deep()` 语法替代 `::v-deep`： ```scss :deep(.el-form-item .el-form-item__label) { background-color: #f5f7fa !important; } ``` --- ##
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值