IE6中用了float:left之后导致margin-left双倍边距的BUG解决方法

最新推荐文章于 2022-11-21 16:23:00 发布
转载 最新推荐文章于 2022-11-21 16:23:00 发布 · 607 阅读 · 0
文章标签：

#float #ie #border #div #css

本文介绍了一种解决IE6浏览器中CSS左边距显示异常的方法。通过添加display:inline属性，可以使div元素在IE6中正常显示10px的左边距。
先看css代码:
div {
    float:left;
        margin-left:10px;
        width:420px;
        height:150px;
        border:1px solid red
        }
这样设置左边距设置为10px，但IE6.0解释为20px，解决办法就是是加上display:inline

代码
div {
    float:left;
        margin-left:10px;
        display:inline;
        width:420px;
        height:150px;
        border:1px solid red
        }
【ChatGLM】基于 ChatGLM-6B + langchain 实现本地化知识库检索与智能答案生成: 中文 LangChain 项目的实现开源工作
AI天才研究院
05-21 7万+
陈光剑简介：著有《ClickHouse入门、实战与进阶》（即将上架）《Kotlin 极简教程》《Spring Boot开发实战》《Kotlin从入门到进阶实战》等技术书籍。资深程序员、大数据与后端技术专家、架构师，拥有超过10年的技术研发和管理经验。现就职于字节跳动，曾就职于阿里巴巴，主要从事企业智能数字化经营管理、电商智能数字化运营等系统架构设计和研发工作。在大数据和企业级系统架构领域有非常深厚的积累，擅长大数据系统架构和分布式系统架构设计开发。
微信小程序——van-field中的left-icon属性自定义
不迁怒，不贰过。小知识，大智慧。
08-25 4629
**van-field** 输入框控件中的 **left-icon** 属性的自定义怎么实现。
IE双倍浮动边界问题
fzcbce的博客
09-27 282
IE双倍浮动边界Bug 原址：[url]http://www.positioniseverything.net/explorer/doubled-margin.html[/url] 译文：PorkFat 什么发生故障？ 一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left)来令它和容器的左边...
IE6双倍边距 IE6浏览器会出现双倍边距解决方法
09-25
所谓的IE6双倍边距就是指当元素有float属性，又有margin属性时，在IE6下面显示的margin的值是设置值的两倍,这个问题从有css技术时就已经诞生，本文将介绍详细解决方法，需要的朋友可以参考下
IE 双边距Bug
老李 技术 专栏
11-04 4446
 一、什么是双边距Bug？先来看图：我们要让绿色盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度。要实现这样的效果，我们给绿色盒模型应用以下CSS属性：以下为引用的内容：.floatbox { float: left; width: 150px; height: 15
让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最小 对抗训练的核心步骤是： 用被对抗性样本污染过的训练样本来训练模型，直到模型能学习到如此类型的抵抗。从而保证模型的安全.
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“
Margin与float:left同时使用 IE6有双倍距的bug
03-29 686
IE6有双倍距的bug" title="Margin与float:left同时使用 IE6有双倍距的bug"> 关于Margin-left或是Margin-right 与float:left同时使用时，在IE6会有双倍距的bug。 解决方案：在同时使用这两个参数的地方加 display:inline   上图总宽为630,其中市区和郊区宽度完全相同各为315px，市区与郊区
IE6中float元素双倍margin问题
weixin_43269800的博客
01-06 325
在IE6中，当给某元素设置float时，同时给该元素设置margin时，他会有双倍外边距的问题 p { float:right; margin-right:10px; /*页面真正显示的是margin-right：20px */ } 解决方案1 p { float:right; margin-right:10px; /*页面真正显示的是margin-right：20px */ _mar...
IE6中float:left后导致margin-left双倍边距的BUG解决办法就是是加上display:inline
tfgdd的专栏
12-23 979
IE6中DIV的最小高度的解决办法在IE6中，系统默认的并非是Div有一个默认的高度，而是你没有解决一个隐藏的参数，font-size，这个是ie6中对于Div属性中的font-size大小和你系统css中定义的font-size有很大关系，因此必须单独定义这个Div的font-size: 0px;关于firefox中margin-top问题 加和float也有原因
IE6下margin-left双倍bug问题
weixin_30449453的博客
11-06 169
熟悉 CSS 盒模型朋友相信对于 IE 双倍浮动边界 BUG 不会陌生，这个 BUG 只会产生在浮动行的第一个浮动元素（此处说法不准确，并不是第一个浮动元素，假如浮动的元素在一行显示不下，占用了多行，那么每一行的第一个元素都会受此 BUG 影响。啊呀教育网编注），所以如果第一个浮动元素没有使用外补丁 margin 就不会有双倍距离。不过最近发现 IE 对于这个 BUG 居然有延伸的现象。 问题 ...
解决IE6下margin双倍边距问题
Akay的Web技术博客
04-23 2241
     问题：在IE6下如果某个标签使用了float属性，同时设置了其外补丁“margin:10px 0 0 10px”可以看出，上边距和左边距同样为10px，但第一个对象距左边有20px。     解决办法：当将其display属性设置为inline时问题就都解决了。     说明：这是因为块级对象默认的display属性值是block，当设置了浮动的同时，还设置了它的外边距就会出现这
IE6中设置了float:left导致margin出现双倍边距的解决方法
weixin_33709609的博客
07-21 112
就是加上 display:inline;
父组件：<template> <div id="app"> <div> <!-- <label>age</label> <input type="text" v-model="date.age" style="margin-left: 30px;margin-top: 30px;"> --> <my-input v-model="data.name" label="年龄"/> <button @click="addClass">添加</button> <button @click="deleteClass">刪除</button> </div> <el-table :data="date.arrReactive" style="width: 100%;margin-left: 15px;"> <el-table-column prop="name" label="Name" width="180" /> <el-table-column prop="age" label="Age" width="180" /> </el-table> </div> </template> <style> label{ display: inline-block; margin-left: 27px; margin-top: 20px; } button{ margin-left: 10px; } </style> <script setup> const date = reactive({ age : '', arrReactive:[ {name: 'tome', age:'10'}, {name: 'tuoni', age:'11'}, {name: 'mark', age:'12'}, {name: 'jack', age:'13'}, ] }) function addClass(){ date.arrReactive.push({name:'month'+date.age, age:date.age} ) date.age=''; } function deleteClass(){ const tag = Number(date.age); date.arrReactive = date.arrReactive.filter(mos=>Number(tag) !== Number(mos.age)) date.age=''; } </script> 子组件：<template> <div style="border: 1px solid red; width: 300px;"> <input v-model="model"/> </div> </template> <script setup> const model = defineModel() </script>
最新发布
07-05
你的代码整体结构是正确的，使用了 Vue 3 的 Composition API 和最新的 `defineModel()` 语法糖来实现双向绑定。但在实际运行中可能会遇到一些问题： --- ## ❗问题：为什么 `<my-input>` 中的输入框无法更新父组件的数据？ ### ✅ 原因分析 1. **`defineModel()` 是实验性功能**（截至 2024 年底） - `defineModel()` 是 Vue 3.4 新增的语法糖，它会自动创建 `modelValue` prop 和 `update:modelValue` emit。 - 它目前只在支持它的构建工具（如 Vite + Vue 插件）中有效，如果你使用的是旧版或不支持的构建环境，这个语法不会生效。 2. **未启用实验性特性** - 如果你没有正确配置项目，或者使用的是 Vue 的传统 `.vue` 文件解析方式，那么 `defineModel()` 将无法正常工作。 3. **子组件未暴露 model 给父组件** - 虽然你在子组件中用了 `defineModel()`，但必须确保 `v-model` 正确地传递到了内部的 `<input>` 上。 --- ## ✅ 解决方案：使用标准 `props + emit` 实现双向绑定（兼容性强） 这是最推荐的方式，适用于所有 Vue 3 环境，不需要依赖实验性语法。 --- ## ✅ 修改后的子组件 MyInput.vue ```vue <!-- MyInput.vue --> <template> <div style="margin-bottom: 15px;"> <label style="display: inline-block; width: 80px;">{{ label }}</label> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" style="padding: 5px;" /> </div> </template> <script setup> // 接收 v-model 的值和 label const props = defineProps({ modelValue: { type: [String, Number], default: '' }, label: { type: String, required: true } }); // 触发更新事件 const emit = defineEmits(['update:modelValue']); </script> ``` --- ## ✅ 父组件 App.vue 使用示例 ```vue <template> <div id="app"> <div> <!-- 使用自定义组件 MyInput --> <MyInput v-model="formData.age" label="年龄" /> <button @click="addClass">添加</button> <button @click="deleteClass">删除</button> </div> <el-table :data="date.arrReactive" style="width: 100%; margin-top: 30px;"> <el-table-column prop="name" label="Name" width="180" /> <el-table-column prop="age" label="Age" width="180" /> </el-table> </div> </template> <script setup> import { reactive } from 'vue'; import { ElTable, ElTableColumn } from 'element-plus'; import MyInput from './components/MyInput.vue'; // 根据你的项目路径调整 // 表单数据 const formData = reactive({ age: '' }); // 表格数据 const date = reactive({ arrReactive: [ { name: 'tome', age: '10' }, { name: 'tuoni', age: '11' }, { name: 'mark', age: '12' }, { name: 'jack', age: '13' } ] }); function addClass() { if (formData.age.trim()) { date.arrReactive.push({ name: 'month' + formData.age, age: formData.age }); formData.age = ''; } } function deleteClass() { const target = Number(formData.age); date.arrReactive = date.arrReactive.filter(item => Number(item.age) !== target); formData.age = ''; } </script> <style scoped> button { margin-left: 10px; } </style> ``` --- ## ✅ 总结对比 | 方法 | 是否推荐 | 说明 | |------|----------|------| | `defineModel()` | ⚠️ 慎用 | 实验性功能，需构建工具支持，不适合生产环境 | | `props + emit` | ✅ 推荐 | 兼容性好、稳定性高、适合所有 Vue 3 项目 | ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值