css
姜雪辞
这个作者很懒,什么都没留下…
展开
-
记录不同浏览器中,flex布局下图片不保持宽高比的问题以及IE下图片不显示的问题
问题重现我在页面上写了一个img标签,因为想让它的大小跟随浏览器窗口尺寸改变,所以在设置样式的时候,直接让它的宽width为父元素(这里就是整个窗口)的100%,高height因为要保持宽高比,所以设置为auto。<div style="display: flex;"> <img src="1.png" style="width:100%;height:auto"/> </div>而我这个img标签的父元素用了flex布局。写的时候因为用的是chro原创 2020-07-23 16:09:45 · 1247 阅读 · 1 评论 -
记录调用window.print时因处理页眉页脚问题导致自动分页后打印不全的解决方法
写在前面这几天朋友项目中还在使用window.print,结果问题它又来了。我写了个demo模拟遇到问题的场景,先看效果: 看过我前一篇关于print的文章的小伙伴都很熟悉这个界面吧,上次截的时候就有这个页眉页脚了,但上次他没有提这个地方。这次发现问题了,就来解决一下。言归正传,那想去掉这个其实很简单,只要在浏览器设置中把页眉页脚勾掉就可以了: 但还是那句话,你可能给每一个用这个项目的客户说,你要在打印之前去浏览器设置里把页眉页脚勾掉吗?显然是不可能的。所以像上次的背景水印一样,我们还原创 2020-07-14 16:53:49 · 3556 阅读 · 1 评论 -
加了!important没用?失效了?记录一个一直被我忽视的关于!important提升权重的问题
情景再现这是我今天写一个小demo时发现的自己一直忽视的问题。先截取一下我的代码片段:<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>test</title> <style> #box { color: green !important; } .pink-text { color:原创 2020-07-09 15:44:39 · 8342 阅读 · 3 评论 -
解决调用window.print时,因页面较长自动分成两页后只有第一页有背景图,第二页没有背景图,以及-webkit-print-color-adjust: exact失效的问题
问题重现为了清晰的看到问题,我新写了一个空白的html,然后对body样式进行了如下设置:①高度2000px②背景图 在y轴循环填满整个高度body { height:2000px; background: url("images/noBallFriends.png") repeat-y;}然后调用window.print()打印当前页面,可以看到他是这样子的:由于2000px的高度比较高,这时它会自动分两页去打印,第一页看上去没什么问题,但第二页:没错,背景图没了。怎么回事?我原创 2020-07-02 14:59:04 · 4157 阅读 · 0 评论