开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Div宽度:在IE11中加载初始表单时100%不工作，可在其他浏览器中工作

Div宽度是指HTML中的一个标签元素，用于创建一个块级元素，可以用来布局和组织网页内容。在IE11中加载初始表单时，如果设置了Div的宽度为100%，可能会出现不起作用的情况，而在其他浏览器中可以正常工作。

这个问题可能是由于IE11对CSS的解析和渲染方式与其他浏览器不同所导致的。为了解决这个问题，可以尝试以下几种方法：

使用具体的像素值：将Div的宽度设置为具体的像素值，而不是使用百分比。例如，将宽度设置为800px。
使用CSS Hack：针对IE11的特殊情况，可以使用CSS Hack来解决。例如，可以使用条件注释来针对IE11设置特定的样式。具体的方法可以参考相关的CSS Hack技巧。
使用Flexbox布局：Flexbox是一种弹性盒子布局模型，可以更灵活地控制元素的布局。通过使用Flexbox布局，可以更好地解决不同浏览器之间的兼容性问题。可以通过设置Div的父元素为display: flex来启用Flexbox布局。
使用CSS媒体查询：可以使用CSS媒体查询来根据不同的浏览器或设备类型设置不同的样式。可以针对IE11设置特定的宽度样式，以解决它的兼容性问题。

腾讯云提供了一系列的云计算产品，包括云服务器、云数据库、云存储等，可以帮助用户构建和管理云计算基础设施。具体推荐的腾讯云产品和产品介绍链接地址可以根据具体需求和场景来选择，例如：

云服务器（CVM）：提供弹性计算能力，支持多种操作系统和应用场景。详情请参考：https://cloud.tencent.com/product/cvm
云数据库MySQL版（CDB）：提供高可用、可扩展的MySQL数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：提供安全可靠的对象存储服务，适用于存储和管理各种类型的数据。详情请参考：https://cloud.tencent.com/product/cos

请注意，以上推荐的腾讯云产品仅供参考，具体选择还需根据实际需求和情况进行评估和决策。

相关搜索:Ionic :在Android中初始加载后数据不会被获取，在浏览器中工作正常代码镜像html在chrome中不工作，但在其他浏览器中工作。当容器具有右侧滚动条时，弹性项宽度无法在IE11中工作默认情况下，Angularjs复选框在加载时处于选中状态，无法在具有ng-true-value的表单中工作 js判断全是空格 js调用音频文件 js微信自动播放外部引用js乱码 js删除空白节点 js 漂亮提示框

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

angular浏览器兼容性问题解决方案

important; 谷歌、火狐及-webkit-内核的浏览器均支持该属性（css3），IE不支持该属性，所以在IE中，会自动降级，表格无固定列，可滑动的形式。...第二个方案的详细过程如下：使用div包裹表格，当表格宽度超过div宽度时，开启滚动： .scroll-table { width: 100%; overflow-x: scroll; } 针对表格...，我们可以指定宽度，让其超过外层div宽度（这样可以看到滚动效果）。...-- 问题：IE浏览器下，初始化表单时，触发表单验证原因：这个是IE的问题，IE10+实现了input事件，但是触发的时机却是错误的。...解决方案：使用表单的reset()重置表单，但是重置的操作需要放在setTimeout中，或者通过其他手段将重置的操作作为表单初始化时的最后一个宏任务执行。

3K3 0

干货：CSS 专业技巧

使用CSS复位 CSS复位可以在不同的浏览器上保持一致的样式风格。...与视口宽度无关，子元素的div将保持其宽高比（100％/ 20％= 5:1）。...避免在加载页面时自动播放。如果没有静音，则不显示视频： video[autoplay]:not([muted]) { display: none;} 再次，我们利用了 :not() 的优点。...使用选择器 :root来控制字体弹性在响应式布局中，字体大小应需要根据不同的视口进行调整。...body { font: 1rem/1.6 sans-serif;} 为更好的移动体验，为表单元素设置字体大小当触发的下拉列表时，为了避免表单元素在移动浏览器（IOS Safari

1.5K5 0

【CSS】378- 44个 CSS 精选知识点

可在 CodePen 上查看真实效果和编辑代码 浏览器支持情况 100% 3. 不变宽高比给定宽度可变的元素，它将确保其高度以响应方式保持成比例（即，其宽高比保持不变）。 DEMO ?...此方法还允许将内容正常放置在元素内。 浏览器支持情况 100% 4.使用表格居中使用display：table（作为flexbox的替代）使子元素在其父元素中水平垂直居。...浏览器支持程度 99.5% 需要使用前缀 caniuse 20. Focus Within 伪类如果表单中的任何子项被聚焦，则更改表单的外观。...浏览器支持程度 82.9% IE11或当前版本的Edge不支持。caniuse 21. 指定元素的全屏 :fullsrcreen 全屏伪类表示浏览器处于全屏模式时显示的元素。...CodePen上预览和编辑代码说明使用：before和：after伪元素作为在悬停时设置动画的边框。 浏览器支持程度 100%. 35.甜甜圈旋转器创建一个甜甜圈旋转器，可用于等待内容的加载。

5.3K1 0

HTML编码规范

[建议] 在 CSS 可以实现相同需求的情况下不得使用表格进行布局。解释：在兼容性允许的情况下应尽量保持语义正确性。对网格对齐和拉伸性有严格要求的场景允许例外，如多列复杂表单。...解释：在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。...解释： viewport meta tag可以设置可视区域的宽度和初始缩放大小，避免在移动设备上出现页面展示不正常。...比如，在页面宽度小于 980px 时，若需 iOS 设备友好，应当设置 viewport 的 width 值来适应你的页面宽度。...解释：当浏览器 JS 运行错误或关闭 JS 时，提交功能将无法工作。如果正确指定了 form 元素的 action 属性和表单控件的 name 属性时，提交仍可继续进行。

3.5K4 1

给萌新HTML5 入门指南

开发人员在开发过程中为了提高开发效率，常常会用到各种组件工具例如：jQuery，BootStrap，webpack，或者前端框架，如：VUE等。...随着浏览器的支持，很多表单控件将成为历史 5....、position和float属性相配合来实现，在确定位置以及清除浮动时，常常会遇到棘手问题（例如：垂直居中，屏幕适应）。...container中aside为浮动元素，宽度20%。main根据剩余宽度调整。 ?...body设置高度 100vh，这里使用了CSS3 的新单位vh，即 view height 视窗高度，100vh相当于html, body 高度100%，同样还有vw代表视窗宽度 body设置flex

1.3K4 1

8个硬核技巧带你迅速提升CSS技术

「神器的选择器」「浅谈布局那些事」「绘制三角的原理」「完美极致的变量」「添油加醋的伪元素」「灵活多变的障眼法」「意向不到的内容插入」「无所不能的模拟点击事件」准备工作整个分享过程不搞那些乱七八糟的环境搭建...) 2 × [attr\|=val] 属性以指定值(完整单词)开头的元素(不推荐使用) 2 × 伪元素选择器说明版本常用 ::before 在元素前插入的内容 2 √ ::after 在元素后插入的内容...以下以左中列宽度固定和右列宽度自适应为例，反之同理。整体的实现原理与上述两列布局一致。 ?...> 为了让右列宽度自适应计算，就不使用float + margin-left的方式了，若使用margin-left还得结合左中列宽度计算...calc(var(--line-index) * 200ms)就像一个JS函数，在当前节点的作用域上读取相应的变量，从而计算出具体数值并交由浏览器初始化。

2.7K3 0

2021前端面试高频 HTML + CSS

加载顺序不同: 使用 link 时，它是和页面同时加载的, 而` @import 是等待页面加载完成，才会加载样式的。 ❞ 7....页面初始渲染，这是开销最大的一次重排添加/删除可见的DOM元素改变元素位置改变元素尺寸，比如边距、填充、边框、宽度和高度等改变元素内容，比如文字数量，图片大小等改变元素字体大小改变浏览器窗口尺寸...选择只读属性的元素属性 :read-write input:read-write 选择没有只读属性的元素属性 :valid input:valid 选择所有有效值的属性 :invalid input:invalid 在表单元素中的值是非法时设置指定样式...默认宽度为父元素宽度，可设置宽高，换行显示。如果不指定宽度，默认为100% 宽 none 元素不显示，并从文档流中移除 inline 行内元素类型。...❝解决方案: 可以使用 reset.css ，重置浏览器的css默认属性 ❞ ❞ 9. width：auto 和 width：100% 区别 ❝width : 100% : 它会的宽度等于父元素的宽度大小

9044 0

【编码规范】HTML编码风格指南

在 head 中引入页面需要的所有 CSS 资源。解释：在页面渲染的过程中，新的CSS可能导致元素的样式重新计算和绘制，页面闪烁。 JavaScript 应当放在页面末尾，或采用异步加载。...解释： viewport meta tag 可以设置可视区域的宽度和初始缩放大小，避免在移动设备上出现页面展示不正常。...比如，在页面宽度小于 980px 时，若需 iOS 设备友好，应当设置 viewport 的 width 值来适应你的页面宽度。...="button">取消提交当使用 JavaScript 进行表单提交时，如果条件允许，应使原生提交功能正常工作...解释：当浏览器 JS 运行错误或关闭 JS 时，提交功能将无法工作。如果正确指定了 form 元素的 action 属性和表单控件的 name 属性时，提交仍可继续进行。

3.1K3 0

如何提升CSS技术？8个硬核技巧带你迅速提升CSS技术

神器的选择器浅谈布局那些事绘制三角的原理完美极致的变量添油加醋的伪元素灵活多变的障眼法意向不到的内容插入无所不能的模拟点击事件准备工作整个分享过程不搞那些乱七八糟的环境搭建。...) 2 × [attr|=val] 属性以指定值(完整单词)开头的元素(不推荐使用) 2 × 伪元素选择器说明版本常用 ::before 在元素前插入的内容 2 √ ::after 在元素后插入的内容...以下以左中列宽度固定和右列宽度自适应为例，反之同理。整体的实现原理与上述两列布局一致。...class="right"> 复制代码为了让右列宽度自适应计算，就不使用float + margin-left的方式了，若使用margin-left还得结合左中列宽度计算。...calc(var(--line-index) * 200ms)就像一个JS函数，在当前节点的作用域上读取相应的变量，从而计算出具体数值并交由浏览器初始化。

2.2K4 0

前端面试选择题_vue最新面试题

Push()尾部添加 pop()尾部删除 Unshift()头部添加 shift()头部删除 12、提交表单，有几种方式 submit提交，Ajax提交form表单 13、定义一个div，让其在页面中...[endif]–> /* 因为条件注释只对IE10以下版本有效（IE11已经取消支持），所以在其他现代浏览器里面会自动忽略，不会加载，因此不会有性能问题 */ /* 因为IE9以下浏览器不支持CSS3，...在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。...在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 91、各种浏览器内核 Trident内核代表产品Internet Explorer，又称其为IE内核。...盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。

1.2K1 0

HTML编码规范建议

[建议] 在 CSS 可以实现相同需求的情况下不得使用表格进行布局。解释：在兼容性允许的情况下应尽量保持语义正确性。对网格对齐和拉伸性有严格要求的场景允许例外，如多列复杂表单。...解释：在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。...解释： viewport meta tag 可以设置可视区域的宽度和初始缩放大小，避免在移动设备上出现页面展示不正常。...比如，在页面宽度小于 980px 时，若需 iOS 设备友好，应当设置 viewport 的 width 值来适应你的页面宽度。...解释：当浏览器 JS 运行错误或关闭 JS 时，提交功能将无法工作。如果正确指定了 form 元素的 action 属性和表单控件的 name 属性时，提交仍可继续进行。

2.7K3 0

pc 和 ipad 端网站适配

|| document.body.clientHeight; console.log(Width, Height); } 如何判断所有 img 加载完成 // 判断所有图片是否加载完成...有一个浮动导航占位符，跟实际浮动导航一样的高度，浮动导航占位符的宽度 width 可以无限大，一般设置为 99999px,足够大，他的父级元素超出隐藏就好了，当实际浮动导航的浮动时，浮动占位符占住原先的位置...chrome Chromium/Blink 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。...没问题 360极速浏览器 没问题搜狗浏览器 没问题 chrome 内核 2345 浏览器 IE 内核没问题 QQ 浏览器 IE 内核 UC 浏览器 webkit 内核，谷歌内核 IE 不兼容 es6...ie10, ie9 无法兼容 display:flex flex布局浏览器兼容处理 ie8, ie9 flex布局浏览器兼容处理 ie8 ie9 IE9 IE10 IE11兼容性更改 ie9中使用flex

2.8K3 0

面试简书（五）

c.懒加载当我们打开一个页面时，浏览器就会从上往下读取页面中的标签src中的地址，并且开启线程来进行加载。...如果页面只有一个视频而且该视频在页面的顶部用起来还是比较顺心的。否则会发现，额。。。播放视频的时候会紊乱的。所以移动端中，不建议做视频和dom重合的设计。如果一定要做，请继续阅读。...3.浏览器同时只能播放一个video标签。当切换播放视频内容时体验不是很好： 浏览器播放组件切换视频时花费的时间可以明显的感知的到。...图片懒加载,简单来说就是在页面渲染过程中,图片不会一次性全部加载,会在需要的时候加载,比如当滚动条滚动到某一个位置时触发事件加载图片，通过js将img标签的data-src属性赋值给src属性方案四:...不然得不偿失,在webpack中可以设置最大多少byte的图片压缩成base64 针对decode base64编码的图片比较慢的问题,我们可以选择使用canvas来加速.当向canvas发出绘画命令时

1.1K1 0

每天10个前端小知识【Day 15】

8.前端项目中为什么要初始化CSS样式？因为浏览器的兼容问题，不同浏览器对标签的默认值是不同的，如果没有对浏览器的CSS初始化，会造成相同页面在不同浏览器的显示存在差异。...link属于HTML标签，而@import是css提供的；页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载； @import只在IE5以上才能识别，而link是...，空白通常指不能放其他元素的区域上述是一个从二维的角度观察盒子，下面再看看看三维图：段代码： .box { width: 200px; height: 100px; padding...: 20px; } 盒子模型当我们在浏览器查看元素时，却发现元素的大小变成了240px。...这是因为，在CSS中，盒子模型可以分成：W3C 标准盒子模型、IE 怪异盒子模型。默认情况下，盒子模型为W3C 标准盒子模型；标准盒子模型，是浏览器默认的盒子模型。

851 0

前端硬核面试专题之 CSS 55 问

在标准模式下浏览器按照规范呈现页面；在混杂模式下，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。 ? ?...提供的，只能用于加载 CSS; 页面被加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载; import 是 CSS2.1 提出的，只在 IE5 以上才能被识别...，而是如果你不指定宽度，那么它就是 100%。...---- 为什么要初始化 CSS 样式 ? 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。...大家要注意 html 中必须使用 div 标签，不要妄图使用什么 p 标签来达到目的。因为 div 有个默认属性，即如果不设置宽度，那它会自动填满它的父标签的宽度。这里的 main 就是例子。

2K2 0

图片上传预览插件制作思路及Demo分享

缺点：工作量大，有些上传并不是用户最终需要上传的图片，但是这种方式会把上传过程中选择过的图片都保存至服务器端，会造成资源浪费，而且服务器端清理临时的那些预览图片也需要一定的工作量。...且浏览器支持情况不一致，支持的浏览器：FF3.6+，Chrome7+，IE10+。...缺点：由于IE11作了安全方面的考虑，使得在input[type=file]元素上通过value、outerHTML和getAttribute的方式都无法获取用户所选文件的真实地址，只能获取到 D:\frontEnd...因为无论是单张图片上传还是单张图片上传，都需要传入、上传图片的input按钮、img标签、包裹着img的div、最大的单张照片的值，单位为KB。所以这四个参数在创建上传图片对象的时候就要传入。...200,250);//单张图片上传，参数分别为每张的宽度、高度 // obj.uploadPics(200,250,2); //多张图片上传，参数分别为每张的宽度、高度、最多上传张数

1.3K2 0

104 道 CSS 面试题 - 知识点总结

只有文档根元素取该属性的概述中给定的初始值（这里的意思应该是在该属性本身的定义中的默认值）。...不足：中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。...在火狐浏览器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。...（3）减少使用@import,而建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。选择器性能：（1）关键选择器（keyselector）。...只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。

4.1K1 0

前端面试题2（CSS）

link 支持早于 @import ，可以使用 @import 对老浏览器隐藏样式 @import 必须在样式规则之前，可以在css文件中引用其他文件总体来说：link优于@import CSS...简单的方式：上面的div宽100%，下面的两个div分别宽50%，然后用float或者inline使其不换行即可经常遇到的浏览器的兼容性有哪些？...非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。...工作原理：浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）浮动元素碰到包含它的边框或者其他浮动元素的边框停留浮动元素引起的问题？...加载时，加载到此样式表时，页面将停止之前的渲染。

2.8K1 1

「资深前端工程师总结」前端面试知识点大全—CSS篇

可以运用到布局（因为当其内元素和父元素宽度相等时没有问题但是只要加了一点padding和margin整个布局就崩溃了）和表单元素（表单中除了checkbox和radio外默认都是2px的border）上...只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。...在css2之前用的是单冒号，之后css3使用时双冒号。目前除了IE外不兼容双冒号，其他的浏览器兼容双冒号，建议还是使用单冒号。...100vw是浏览器的内部宽度，而100%是可用宽度，不含滚动条。 calc（100vw-100%）是浏览器的滚动条的宽度。...当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

1.5K3 0

html和css进阶

2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。...但理论上，IIS4中最大量为80KB，IIS5中为100KB。 5.get安全性非常低，post安全性较高。代码： ---- <!...，如果不写宽度占父级100% block 行内：不换行，宽高不生效，尺寸和内容一样大 inline 行内块：不换行，宽高生效 inline-block Display：none 隐藏配合js...；尺寸和内容一样大换行的标签 -- 块：书写宽度高度生效，不写宽度，宽度和父级一样大行内块：宽度高度生效，在一行显示拓展：浏览器执行行内和行内块标签的时候当做文字处理...（举的例子是下面的代码显示，不代表其他。）其他的话，就是相当于1号浮起来了，2号会从头开始，忽略了1号的位置。代码： ---- <!

3.5K5 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭