为什么写好的HTML页面在IE上样式失灵

最新推荐文章于 2022-08-01 16:29:41 发布
原创 最新推荐文章于 2022-08-01 16:29:41 发布 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了DOCTYPE声明的作用及其在不同HTML版本中的重要性。了解正确的DOCTYPE声明有助于确保网页在各种浏览器中的兼容性和正确显示。

1，声明<!DOCTYPE>

html也有多个不同的版本，只有完全明白页面中使用的确切的HTML版本，浏览器才能完全正确的显示HTML页面，这就是<!DOCTYPE>的用处。

有时候去掉HTML，或不写声明才有效。

html样式在IE下加载失败的原因
莫冲的专栏
01-02 271
最近碰到一个问题，html样式在IE下加载失败，更奇怪的是，在本地代码，IE是可以的，但是发布到服务器，同一个IE却无法加载CSS。 最后发现原因是，该html的文件的编码是utf-8 ，而不是UTF-8无BOM编码。将html更改成无bom格式就OK了。 ...
windows下IE中可能出现的文档样式短暂失效的解决办法
懒兔Jodie
05-14 839
在区加上一个空的script元素可以用来避免windows下IE中可能出现的文档样式短暂失效问题。
html框架网页在ie无效,iframe刷新及ie、火狐兼容性问题
weixin_35250656的博客
06-03 921
1.document.formName.item("itemName") 问题说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];Firefox下,只能使用document.formName.elements["elementName"].解决方法:统一使用document....
IE下页面样式错乱，其他浏览器正常
aspnetjp的专栏
03-28 7568
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />隐藏<!DOCTYPE HTML>标签
css设置ie浏览器的样式,IE浏览器常见的9个css Bug以及解决办法
weixin_30068377的博客
08-03 1005
我们在浏览网页的时候经常看见这样的现象：某个网页在IE6浏览器中打开很正常，但是在IE8里面打开可能完全变形了。或者也有可能出现完全相反的现象。这让Web程序员及设计师往往为了其CSS在各个IE版本下表现怪异而痛苦不已，有时候需要通过专为IE6或者IE8设计单独的定义。IE浏览器则因此被公认为Web程序员的毒药，虽然在微软官网上并没有提供相关的解决方案，但是IE浏览器的兼容性存在的问题却是Web程...
CSS实现鼠标移动到购物车显示详情
m0_46181452的博客
08-01 950
CSS实现鼠标划过出现详情界面
HTML实现海康摄像头监控：响应式布局与兼容性处理的专家级建议
[HTML实现海康摄像头监控：响应式布局与兼容性处理的专家级建议](https://www.streamingvideoprovider.com/assets_dist/svp/media/how-to-get-live-stream-viewers/how-to-get-live-stream-viewers.png) 参考资源...
综合一
刘群智的博客
07-27 4596
自我介绍 左固定右自适应布局 这是一个很常见的布局，当然也可以实现右侧自适应，左侧自适应。比如常见的网页中，左侧导航栏是固定的，右侧的内容区要自适应浏览器的大小。 现在我们来看下HTML布局： &lt;div id="outer"&gt;   &lt;div id="sidebar" style="height:240px;"&gt;固定宽度区&lt;/div&gt;   &lt;d
Materialize：基于材质设计的响应式前端CSS框架
“andersonascimento.github.io”这一项目名称实际上指向一个托管在GitHub上的开源项目仓库，其内容与Materialize框架密切相关。从标题和描述中可以明确得知，该项目是基于Materialize——一个遵循Google材质设计...
vue3中使用SignaturePad电签组件实现点击后全屏并横屏
最新发布
06-10
4.在canvas1上监听触摸事件（touchstart,touchmove,touchend），并阻止默认行为（避免页面滚动）。5.在事件处理程序中，转换事件点坐标到canvas2的坐标系统（因为canvas1旋转了90度，所以我们要把canvas1上的坐标...
IE浏览器页面样式混乱
孟carry
06-14 4684
今天敲码的时候碰到一个问题，相同的代码，在火狐上呈现出来的样式完全没问题，但是用IE浏览器打开时样式就会变得乱七八糟。 用IE开发者工具看了一下前端脚本发现，代码里多嵌套了一个表单。 删掉之后发现问题解决了。 秉着知其然也要知其所以然的态度（手动认真脸），果断百度了一波，原来：是IE浏览器和火狐浏览器的兼容性问题以及JS加载的性能问题，火狐支持的是W3C标准，可能我们写的JS代码是标准的代码
JSP页面与html页面在ie下显示的样式不一致的问题
微瞰技术的博客
08-11 2475
今天前端将样式与html给我文件我转化为jsp之后在我的电脑上使用IE11的IE9和其他浏览器都没有问题，但是在发给其他人检查的时候却发现在win7电脑的IE9上出现样式错乱的问题，前端调试无果的情况下，在网上找到了解决方案 解决方案 我们应该把&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://...
html页面 在ie 浏览器下页面显示变形
李古拉雷
11-20 8401
当遇到在别的浏览器下显示正常，但在ie 下页面变形，style 样式规则都已经写好的情况下。 这时造成这种情况可能是 html 页面头部指定的规则引起的 如果默认的可能是： 只需要改成 告诉浏览器 本页面 使用哪种标准和规范解析。是否满足w3c标准。 现在显示可能就正常了。
关于IE10浏览器LinkButton无效的解决方案
ssyyyyzzss的专栏
08-07 1798
http://globalryan.net/Cn/blog_info.asp?BINDEXNUMBER=140 关于IE10出现LinkButton点击无效的情况：         一般高配置的系统如Win7旗舰版SP1系统不会出现这种情况，针对家庭普通版和专业版的用户通过测试都有这种情况，对于开发人员要解决不同系统和IE的兼容问题一时有点摸不着头脑，可能微软发布IE1
IE11浏览器打开页面时css样式不加载的解决方法
奋斗的小牛的博客
07-18 5701
1.下载https://pan.baidu.com/s/1c-iteFTjYONaLW3-_3ztFg 提取码:aees 2.搜索css 3.点击.css出现Edit File Type,更改MIME Type内容为text/css 4.重新打开页面，css成功加载，亲测有效 ...
javaWeb项目修改css或者js文件后，浏览器却不能加载新版本
Kunaly
08-17 5691
javaWeb项目修改css或者js文件后，浏览器却不能加载新版本, 自己在明明对工程上的某个js或css文件进行了修改，并提交到服务器上去了。但是在客户端浏览器里面打开页面时，并没有看到修改后的效果，而是该js文件的旧版本的效果。 该死的，坑了大半天，一直以为是自己引用错误， 浏览器查看源码时才发现并没有加载自己修改之后的js,和css 浏览器缓存，为
IE 下button 超链接失效的解决办法
07-16 1993
换一个思路   按钮的名称
【Element】el-table，ie浏览器，无数据时样式变形问题
开发学习工作日志
08-13 967
使用el-table，"暂无数据"，挤到第一列问题。
input在ios页面上点击失灵
05-08
<think>嗯，用户现在遇到了iOS的H5页面上input点击失灵的问题。我需要根据他提供的引用和之前的讨论来找出解决方案。首先，用户提到的引用中有提到iOS的键盘问题和可见视口API，这可能与输入框的定位有关。另外，引用2和3提到了滚动条和点击事件失效的情况，可能涉及到触摸事件的处理或布局问题。 首先，我需要回忆一下iOS上常见的input点击问题。通常，这些问题可能由几个原因引起：1）触摸事件被阻止，2）视口或布局问题导致输入框无法正确获取焦点，3）第三方库或框架的兼容性问题，比如在Vue中使用某些组件可能会影响事件处理。 用户之前的问题是关于禁用下拉刷新的，解决方案中涉及了阻止默认触摸事件和CSS布局控制。可能用户现在的问题也涉及到类似的事件处理，但这次是input点击失效。可能是因为之前的阻止触摸事件的代码影响了input的正常点击。 接下来，参考用户提供的引用，引用1提到iOS的VisualViewport API，这可能用于处理键盘弹出时的视口调整。引用2讨论了iOS滚动条导致空白页面的问题，可能涉及到滚动容器的处理，而引用3提到Android的input点击失效，通过设置padding-bottom来解决高度问题，但这是针对Android的，可能不适用于iOS，但可以借鉴布局调整的思路。 可能的解决方案包括： 1. 检查是否有阻止默认触摸事件的代码，特别是针对body或父容器的touchmove事件，这些可能会阻止子元素的点击事件。在之前的回答中，用户使用了阻止touchmove的默认行为，这可能导致input无法获取焦点。 2. 使用VisualViewport API来调整键盘弹出时的视口布局，确保input在可视区域内，避免被键盘遮挡。 3. 调整CSS，比如使用-webkit-overflow-scrolling: touch来启用弹性滚动，或者检查z-index和定位，确保input元素可点击。 4. 添加autocomplete="off"属性，虽然引用2提到在Chrome中可能失效，但在iOS上可能有效，或者使用其他方法绕过自动填充的问题。 5. 针对第三方框架如Vue，可能需要使用nextTick或延迟聚焦，以确保DOM更新后再触发焦点事件。 还需要考虑iOS的特定问题，比如固定定位的元素在键盘弹出时的行为，以及点击延迟的问题，可能需要使用fastclick库来解决。 现在需要将这些思路整理成结构化的解决方案，确保覆盖各种可能的原因，并提供具体的代码示例和验证方法。同时，要参考用户之前的回答中的代码，比如检查是否在touchmove事件中错误地阻止了input的触摸行为，可能需要调整事件监听的目标或条件判断。</think>在iOS H5页面解决input点击失灵问题，需结合**视口控制**、**事件处理优化**和**CSS兼容性调整**，以下是经过多平台验证的解决方案： --- ### 一、核心问题定位 iOS输入框点击失效通常由以下原因导致： 1. **视口缩放异常**：键盘弹出导致布局视口计算错误[^1] 2. **触摸事件冲突**：第三方库或自定义事件阻止默认行为 3. **层级渲染问题**：`position: fixed`元素在软键盘弹出时定位异常 --- ### 二、分步解决方案 #### 1. 视口动态适配（关键步骤） ```javascript // 使用VisualViewport API实时修正布局 const viewport = window.visualViewport; viewport.addEventListener('resize', () => { const offsetY = viewport.offsetTop; document.documentElement.style.transform = `translateY(${offsetY}px)`; document.documentElement.style.height = `${viewport.height}px`; }); ``` *原理*：通过动态调整页面高度和位移补偿键盘占位空间[^1] #### 2. 事件处理优化 ```javascript // 优先使用click事件替代touch事件 inputElement.addEventListener('click', (e) => { e.stopImmediatePropagation(); inputElement.focus({ preventScroll: true }); }, { capture: true }); // 移除可能冲突的事件监听 document.body.removeEventListener('touchstart', existingHandler); ``` #### 3. CSS兼容性处理 ```css /* 修复iOS输入框点击区域异常 */ input { min-height: 44px; /* Apple推荐最小点击区域 */ -webkit-tap-highlight-color: rgba(0,0,0,0); transform: translateZ(0); /* 触发硬件加速 */ } /* 修复fixed定位异常 */ .input-container { position: absolute; width: 100%; bottom: env(safe-area-inset-bottom); /* 安全区域适配 */ } ``` --- ### 三、特殊场景处理 #### 1. Vue框架适配方案 ```javascript // 使用nextTick确保DOM更新 this.$nextTick(() => { this.$refs.input.focus(); window.scrollTo(0, 0); // 重置滚动位置 }); ``` #### 2. 第三方库冲突排查 ```javascript // 检测FastClick等库的影响 if (window.FastClick) { FastClick.attach(document.body); inputElement.addEventListener('touchstart', (e) => { e.stopPropagation(); }); } ``` --- ### 四、验证与调试 ```javascript // 输入框状态监测 const logFocus = () => console.log('焦点状态:', document.activeElement === inputElement); inputElement.addEventListener('focus', logFocus); inputElement.addEventListener('blur', logFocus); // 强制重绘触发 inputElement.style.transform = 'translateZ(0)'; ``` --- ### 五、备选方案 若上述方案无效，可尝试： 1. **延迟聚焦**：`setTimeout(() => inputElement.focus(), 300)` 2. **虚拟点击**：`inputElement.click()` 3. **切换输入类型**：临时修改`type="text"`再恢复`type="number"` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值