Perfect solution to png8 burr problem_html/css_WEB-ITnose

In the past, the solution for PNG8 images under IE6 when working on PC was as follows:

Save the PNG as PNG24, and then add DD_belatedPNG.js to the project like this library, so that the white background of png24 in ie6 will be transparent. This method seems to be quite perfect, because first of all, it facilitates the maintenance of pictures in the later stage, and a js library can easily handle it! It saves us front-end girls a lot of worry O(∩_∩)O! Second, it can be said to reduce a lot of burden on the server.

But something unfortunate happened. It was really confusing when I was working on the WeChat Smart Life activity page this week. DD_belatedPNG.js conflicts with the js of the framework (I didn’t check the specific reason because time is too tight, I guess the framework is not perfect). First, let’s introduce the framework of this event page, full-screen sliding (supports mouse scroll switching) , the content of the page is also simple, after all, it is just an activity page (*^__^*)... Interested friends are welcome to click (http://action.weixin.qq.com/payact/readtemplate?t=pc/ 2015/wisdom_life/index_tmpl)

OK, back to the topic, after adding DD_belatedPNG.js to this project, png24 not only did not show a transparent effect in ie6, but also affected some absolute positioning, which is too sad (;′⌒`) , in order to be able to go online within the estimated time, so I didn’t worry too much at that time, because there was nothing to worry about. There would inevitably be conflicts when quoting my aunt’s library. Finally, under the guidance of the instructor, I decided to use png8 images for IE6, and png24-bit images for other browsers.

The problem comes again... In the past, most png8s had rough edges, so I personally didn’t like them. But under the guidance of the instructor, it really disappeared. The effect is basically the same as other browsers. This method is also very simple. Just select png8 when saving the web format, fill the edges with a color close to the background color (or background color), and then go to the style to make corresponding patches. , this method is really perfect, almost no flaws can be found! The effect of the last picture in ie6 O(∩_∩)O haha~

　The effect in ie6

Chrome effect

Speaking of which, by the way, let’s talk about another problem I encountered this time, which I didn’t pay much attention to before. Normally, when we get a project, we will first communicate with the product and design side, and only then will it be our job to analyze the design draft, build the framework, etc. When building the framework, we will know what the page will use. Initialize the tags that have been reached, then for this type of title, h1, h2, h3, h4, h5, h6, although they have been initialized, they still have a height similar to padding and margin. This is done using padding. , margin cannot be eliminated. I also learned that there is a method to solve this kind of problem during this project. It really solved the long-standing trouble. I also blame myself for not reading enough books. I didn’t know it until now. , this powerful weapon is to set line-height to 1. The writing method is line-height: 1;px is omitted, ~(???)/~