浏览器显示特别大css

html-css012

浏览器显示特别大css,第1张

1、打开IEDeveloperTools,在网络面板,进行捕获,抓取到的css文件是完整的。

2、打开IE,Developer,Tools的HTML面板,在右侧样式面板中,点击最右侧对应的该css文件,或者在css面板中选择该css文件,将滚动条拉到底,可以看到css文本是否解析完整。

肯定会出现这种情况,而且还不止是IE6的问题,当浏览器渲染页面的时候,是从上到下的执行过程,当执行到link标签的时候,就会读取对应的css文件,这时候渲染却不会停止,当渲染到body内容里的元素的时候,如果css加载还没有完成,则浏览器会采用该元素的默认样式,从而出现页面排版混乱的问题,如果这时候css文件加载完成了,浏览器会有一个回流的动作,为页面元素重新渲染读取到的css,最后回复正常。

原始处理方法是将要展示的图片进行处理。比如你的DIV宽度为500px(像素),那你上传的图片或放入网页的图片宽度就要小于500px,也就是你图片需要图片软件剪切、等比例缩小方法处理后再上传、放入网页中解决撑破撑开DIV问题。

常见很多大型图片站点、新闻站点都是将照片图片进行处理适应网页宽度情况下,进行图片编辑处理的。

二、防止图片撑开DIV方法二

如果不处理照片方法适应DIV有限宽度,那可以对DIV设置隐藏超出内容方法。只需要对DIV设置宽度后加入CSS样式“overflow:hidden”即可解决隐藏图片比DIV过宽部分解决撑破DIV问题。

三、解决方法三

对图片img标签中只加入宽度即可解决。这样可以等比例缩小图片,不会影响图片画面质量。

比如你的网页DIV宽度为500px,那你上传图片后对img标签设置width等于500以下即可。

即可解决图片过宽导致DIV SPAN撑破,这样好处可以等比例放大缩小图片。

四、CSS解决撑破方法四

这种方法使用CSS直接对div内的img进行宽度设置,这样不好是如果图片过小会影响网页浏览图片时候效果。