I have been using Internet Explorer to make web pages. Today I went to the official Firefox website and installed one without the Google plug-in (I hate plug-ins in particular, and it is almost impossible to download Firefox without the Google plug-in in China. Browser! )
Open it and see, wow, it’s finally here, ff has a lot of incompatibility issues. Just click on the incompatibility issues and there are dozens of them. Solve them one by one slowly, search slowly, and first organize and share a few simple ones to learn.
1. The simplest CSS for mouse over hand transformation needs to change cursor:pointer; the automatic one under dw8 does not have the hand attribute anymore, the standard one is pointer
2.ff does not support filters. The most common one is Translucency is not supported.
filter: Alpha(Opacity=50);
opacity: .5;
style="-moz-opacity:0.5; filter:alpha(opacity=50);cursor:hand;" onmouseover=" this.style.MozOpacity=1;
this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;
this.filters.alpha.opacity=50"
3. ff does not support expression_r. For example, to remove the border of the link, you need to write different css
a,area { blr:expression_r(this.onFocus=this.blur()) }
:focus { outline: none; }
4.ff does not support the color setting of the div scroll bar, and there is currently no good way to replace it.
.content {
position: absolute; left: 0px; top: 10px; width: 580px;height: 135px;
line-height:120%;text-align:left; font-family:" Songti";word-break : break-all; color:#6D6E71;
OVERFLOW-Y:auto;OVERFLOW-X:no;
SCROLLBAR-ARROW-COLOR: red; SCROLLBAR-TRACK-COLOR: F6F6F6; SCROLLBAR-FACE-COLOR:#F6F6F6;SCROLLBAR-SHADOW-COLOR:#F6F6F6;
SCROLLBAR-DARKSHADOW-COLOR:#F6F6F6;SCROLLBAR-3DLIGHT-COLOR:#F6F6F6;SCROLLBAR-HIGHLIGHT-COLOR:#F6F6F6;
}
This has no effect at all in ff.
5.ie The border-width of the horizontal line displayed below the text: 0px 0px 1px 0px; in ff it runs above the text. (I checked the manual and still couldn’t find a solution. It feels strange~~ It turns out that the fault tolerance of ff is too poor, which is caused by the following width: 186px; height: 0px;. In fact, a:haver has inherited the superior one. Attributes, just define different styles. It seems that ff helps to create standardized and concise web pages. It also has a deeper understanding of css, which is a good help for providing css)
. onelinksdiv a:hover {
display: block;border-style: solid;color: #ff0000;border-width: 0px 0px 1px 0px;
}
//The following is written under ie Normal, but wrong under ff
.onelinksdiv a:hover {
display: block;border: #ff0000 solid; border-width: 0px 0px 1px 0px;
width: 186px;height: 0px ; color: #ff0000; font-size: 14px; text-align: right;
}
Related references:
border-width:border-top-width border-right-width border-bottom- width border-left-width;
p#fourborders
{
border-width:thick medium thin 12px;
}
If four values are defined, then these four values are The width values of the top, right, bottom and left borders (starting from the top border and traversing in counterclockwise order).
is equivalent to the following definition
p#fourborders
{
border-top -width:thick;
border-right-width:medium;
border-bottom-width:thin;
border-left-width:12px;
}
6.ff is not supported
DIV+CSS design IE6, IE7, FF compatibility
DIV+CSS web layout This is a trend, and I have begun to follow this trend. However, when using DIV+CSS website design, you should pay attention to the css style being compatible with different browsers Problem, especially for web pages designed entirely using DIV CSS, you should pay more attention to the compatibility of IE6 IE7 FF with CSS styles, otherwise, your web page may be a mess! I am often overwhelmed by these things, so I looked for some information on the Internet, combined with my own understanding and experience these days, compiled some information, some of which I have not used and cannot understand yet, just I pasted it directly from other places. I don’t know if there are any errors. I will slowly change it when I use it in the future. I hope it will be helpful to everyone!
What is browser compatibility: when we use different When using a browser (Firefox IE7 IE6) to access the same website or page, there will be some incompatibility issues. In this browser, the display is normal, but in another browser, it is messed up. When we write CSS It will be very annoying. You just fixed the problem in this browser, only to have a new problem in another browser. Okay, I'm convinced, then I'll take advantage of your incompatibility and write a piece of css each, and let them each perform their own tasks. It's time for you to lose your temper, haha.
Okay, let’s get down to business
1. !important (limited function)
With IE7’s support for !important, the !important method is now only compatible with IE6. (Pay attention to the writing. Remember that the declaration position needs to be declared in advance.)
For example:
#example {
width: 100px !important;
width: 200px;
}
2. CSS HACK method (novices can take a look, experts should just pass by)
The first thing you need to know is:
Common height for all browsers: 100px;
Special_height for IE6: 100px;
Exclusive for IE7* height: 100px;
Common to IE6 and IE7*height: 100px;
Common to IE7 and FF height: 100px !important;
For example:
#example { height:100px; }
* html #example { height:200px; }
* html #example { height:300px; }
The following This method is relatively simple
Give a few examples:
1. IE6 - IE7 FF
#example {
height:100px;
_height:200px;
}
In fact, this can also be done using the first method mentioned above
#example {
height:100px !important;
height:200px;
}
2. IE6 IE7 - FF
#example {
height:100px;
*height:200px;
}
3. IE6 FF - IE7
#example {
height:100px;
* height:200px;
}
4. IE6 IE7 FF are different
#example {
height:100px;
_height:200px;
* height:300px;
}
or:
#example {
height:100px;
*height:300px;
_height:200px;
}
It should be noted that the order of the codes must not be reversed, otherwise all previous efforts will be wasted. Because when the browser interprets the program, if the name is the same, it will overwrite the previous one with the later one, just like assigning a value to a variable, so we put the general ones in the front, and the more specialized ones, the later
Explain the code of 4:
When reading the code, the first line height: 100px; is common to everyone, IE6 IE7 FF all displays 100px
When it comes to the second line *height: 300px; FF does not recognize this attribute, IE6 and IE7 both recognize it, so FF still displays 100px, but IE6 and IE7 overwrite the height attribute obtained in the first line, and both display 300px
and the third line _height:200px; only IE6 recognizes it, so IE6 It overwrites the height obtained in the second line, and finally displays 200px
In this way, the three browsers have their own height attribute, let each play with it
If you don’t understand yet , either you go to hit the wall, or I go! But it’s better for you to go.
Oh, I almost forgot to mention:
* To be compatible with IE7, html must have the following statement at the top of the HTML:
3. Use IE-specific conditional comments
< ;!--Other browsers-->
< !--[if IE 7]>
貌似要编三套css，我还没用过，先粘过来再说
IE的if条件Hack
1. 除IE外都可识别
2.
3.
4.
5.
6.
7.
8.
9.
10.
11. 注:gt = Great Then 大于
> = > 大于号
lt = Less Then 小于
< = < 小于号
gte = Great Then or Equal 大于或等于
lte = Less Then or Equal 小于或等于
四、css filter的办法(据作者称是从国外某经典网站翻译过来的说)
新建一个css样式如下：
#item {
width: 200px;
height: 200px;
background: red;
}
新建一个div,并使用前面定义的css的样式：
div css notes, about many incompatibility issues between IE and fox
What file is resource?
How to set a scheduled shutdown in UOS
Springcloud five major components
The role of math function in C language
What does wifi deactivated mean?
iPhone 4 jailbreak
The difference between arrow functions and ordinary functions
How to skip connecting to the Internet after booting up Windows 11
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
