写DIV+CSS时如何避免IE重影的bug

html-css013

写DIV+CSS时如何避免IE重影的bug,第1张

没有杜绝的说法，只有你不断去调试的结果，了解各种浏览存在的BUG，兼容才是王道。你说的浮动问题，到后面要加个清除样式.<div class="clean"></div>.clean{clear:both}

好像还没有什么好的解决办法。系统的字体放大后是正常的，但是大多数软件都没有很好的支持放大。 所以除了系统字体外，都很模糊。解决模糊的现行办法：

1.将就的用100%，不放大

2.设置为 低分辨率，虽然各方面都显示的很清楚，但显示效果又降分了，没有很好的发挥高分屏的特点

1.目前台式电脑与笔记本适配测试数据以下为参考数值：

台式机和笔记本电脑的分辨率：2560x1440 1920x1200 1680x1050 1600x1200 1440x900 1366x768 1280x1024 1280x800 1280x768 1152x864 1024x768 800x600

平板电脑分辨率：iPad（ 768x1024 ）iPad Pro（1024x1366）Nexus 10（800x1280） Nexus 7（600x960）---显示都是不完整的

智能手机分辨率：Nexus 5（360x598） Nexus 5x（412x684） iPhone 6 Plus（414x736） iPhone 6（375x667） iPhone 5（320x568） iPhone 4（320x480）------显示都是不完整的

2.突然出现滚动条禁止屏幕抖动：

body {

padding-right: calc(100vw - 100%)

}

3.更改（美化）滚动条样式：

//滚动条整体部分

::-webkit-scrollbar {

width: 6px

height: 6px

background-color: transparent

}

//滚动条轨道部分

::-webkit-scrollbar-track {

background-color: transparent

}

//滚动条滑块部分

::-webkit-scrollbar-thumb {

border-radius: 3px

background-image: linear-gradient(135deg, #09f, #3c9)

}

4.自动识别文本换行

7.页面暗黑模式：

html{

filter: invert(1) hue-rotate(180deg)

}

8.页面悼念(全灰)模式：

html{

filter: grayscale(1)

}

9.两端文本对齐 ：

text-align-last:justify

10.禁用效果 ：

pointer-events:none

11.aspect-ratio维持图片长宽比 ：

aspect-ratio：1/1

12.clamp() 实现页面的响应式 ：

clamp() 的工作原理是“夹紧”或限制一个灵活的值，使其处于最小和最大范围之间

img {

width: clamp(15vw, 800%, 100%)

}

h1 {

font-size: clamp(20px, 5vw, 35px)

}