Problem one: The simplest mouse-over variant of the CSS to change the Cursor:pointer;/*firefox (Firefox) does not support cursor:hand*/DW8 below the automatic and there is no hand this attribute, the standard is pointer
Issue two: Firefox does not support the most common translucency of filters is not supported.
Filter:alpha (OPACITY=50); /* for IE */
Opacity:. 5;/* for Firefox */
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 "
Problem three: Firefox (Firefox) does not support expression such as removing the border of the link to write a different CSS
A,area {blr:expression (This.onfocus=this.blur ())}/* for IE */
: Focus {Outline:none;}/* for Firefox */
Question four: Firefox does not support the color settings of the div scroll bar, and there is no good way to find a replacement.
. contendiv {
Position:absolute; left:0px; top:10px; width:580px;height:135px;
Line-height:120%;text-align:left; font-family: "Song body"; 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 is completely ineffective in Firefox.
Problem five: IE below the text below the line of border-width:0px 0px 1px 0px, in Firefox (Firefox) ran to the text. (Check the manual or did not find a solution to the feeling strange ~ ~ The original is Firefox (Firefox) fault tolerance is too poor, is the following width:186px;height:0px, the width of the high cause, in fact, A:haver has inherited the attributes of the superior, As long as you define a different style, it seems that Firefox (Firefox) helps to make standardized, concise web pages, the understanding of CSS is also more profound, for the provision of CSS is a good help)
. onelinksdiv A:hover {
Display:block;border-style:solid;color: #FireFox (Firefox) 0000;border-width:0px 0px 1px 0px;
/*
Display:block;border-style:solid; border-width:0px 0px 1px 0px;
width:186px;height:0px; Color: #FireFox (firefox) 0000; Font-size:14px;text-align:right;
*/
}
The following wording is normal under IE, but it is wrong under Firefox (Firefox).
. onelinksdiv A:hover {
Display:block;border: #FireFox (Firefox) 0000 solid; border-width:0px 0px 1px 0px;
width:186px;height:0px; Color: #FireFox (firefox) 0000; 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 you define four values, then these four values are top, right, bottom, and left box width values (starting from the top border and traversing in a counterclockwise order).
Equivalent to the following definition
P#fourborders
{
Border-top-width:thick;
Border-right-width:medium;
Border-bottom-width:thin;
border-left-width:12px;
}
Question six: Firefox (Firefox) does not support <body scroll= "No" > scroll properties, must be defined Overflow:hidden, and under the HTML tag, not under the body
html{
Overflow:hidden;
}
Question seven: Firefox does not support data island bindings <xml id= "News" src= "Http://blog.163.com/fan_yishan/news.xml" ></xml> In IE can be loaded into the data, but to the Firefox will not load data, began to think it may be because the content of the line too much text can not be loaded, but delete only a few words after the same.
Issue eight: style= "Word-break:break-all" when the contents of the cell in the Web page is more than one line, the new line style defined in IE browser can be used normally, but it can't be supported in Firefox. style= "Word-break: Break-all "is the MS extension of IE proprietary properties, has not become a standard, so Firefox can not support it. However, MS has submitted it to the CSS3, which is also seen in the candidate scheme. I hope this attribute in the final decision by the CSS3 Standard, Firefox can support it. You can try this before.
Style= "Table-layout:fixed;word-wrap:break-word" (when it is in English, it will not be normal to change the line)
Question nine: currently Firefox (Firefox) 2.0 does not support IE's name Anchor point
Such writing is not supported: <a href= "http://blog.163.com/fan_yishan/###" onclick= "History.go ( -1)" >go back</a>
Originally according to the,<a> syntax tag always look for the href address and jump past, now the OnClick event and # # #这个地址又有冲突.
In order to make Firefox and IE part of the element properties compatible, that laborious, I inadvertently found that Firefox is sensitive to space:
<a onclick= "window.location.href= ' http://blog.163.com/fan_yishan/faq.php?page=messages#2 '" >//With spaces, Anchor point function
<a onclick= "window.location.href= ' http://blog.163.com/fan_yishan/faq.php?page=messages#2 '" >//No spaces, Anchor point no effect
Anchor point of writing and very fastidious, such as <a name= #1 >,firefox not support anchor Point, have to add id= #1
The static same page reference must be written like this: <a href= "http://blog.163.com/fan_yishan/#1" ></a>,<a href= "Http://blog.163.com/fan_ Yishan/static.html#1 "></a> will not, dynamic page to use JS
Sequela came, considering the mouse style and browser compatibility began to toss:
<a href= "http://blog.163.com/fan_yishan/###" onclick= "" >//Incompatible
<a href= "javascript:;" onclick= "" >//Incompatible
<a href= "javascript:function (); >//No {...}, illegal writing of scripts
<a style= "Cursor:hand" onclick= "" >//User not caring for custom system mouse styles
<a href= "javascript:onclick=" ">//Status bar will appear, how long the href shows how long
<a href=# onclick= "" >//I use the
Question 10: Firefox (Firefox) Firefox does not support the document.all attribute, must be used document.getElementById (' idname ');
The following is my animation switch effect, under IE normal, to the Firefox inside will not move, after the change can switch the image but gradually fade out of the effect is not. The reason is that Firefox does not support filter filter and has to be implemented with a translucent div.
/*
Company Page
*/
function playcompanyimg ()
{
Window.setinterval (' changecompanyimg (); ', interval);
}
function changecompanyimg ()
{
/*
Firefox does not support the document.all attribute, must use document.getElementById (' idname ');
*/
if (document.all)
//{
/**
The following two sentences are the code that toggles the background picture before switching the effect, number, image, and idtemp to set the global variable to
*/
Number = Math.floor (Math.random () * image.length);
Idtemp.src=image[number];
Alert (number+ "II" +IDTEMP.SRC)
/**
The following two sentences are for the slide transition effect.
*/
alert (do_transition);
Document.all.companyimg.style.filter= "Progid:DXImageTransform.Microsoft.Fade (duration=2,overlap=0.4)";
/*
Document.all.companyimg.style.filter= "Progid:DXImageTransform.Microsoft.Fade (duration=1,overlap=1)";
Document.all.companyimg.filters[0]. Apply ();
Document.all.companyimg.filters[0]. Play ();
*/
var COMPANYIMGIDTMEP = document.getElementById (' companyimg ');
Companyimgidtmep.style.filter= "Progid:DXImageTransform.Microsoft.Fade (duration=1,overlap=1)";
Companyimgidtmep.filters[0]. Apply ();
Companyimgidtmep.filters[0]. Play ();
//}
}
Reference: Core: Filter:revealtrans (duration=1,transition=23); An IE filter,
In other non-IE browser although does not support this filter, but support transparent filter, you can split, ie continue to use your effect, and in non-ie browser with transparent filter:
Style.opacity
Opacity = 0.5 CSS3
Style. Mozopacity
-moz-opacity:0.5 Mozilla is equivalent to the above filter this filter also applies to Netscape
Style. Khtmlopacity
-khtml-opacity:0.5 a transparent filter in Safari.
Ie:
Obj.filters.alpha.opacity
To Meizz (Plum blossom Snow)
Actually, I thought about your problem. But transparent opacity this he is not a gradual process.
In general, this picture over effect lasts up to a second, up to two seconds duration=2
More than 2 seconds is very cumbersome, distracting.
Implemented in 2 seconds
G_img.style.filter= "Alpha (opacity=" +i+ ")" The change in transparency is a cumbersome thing.
To change the value of I with Window.setinterval, and to invoke hundreds of Window.setinterval
To see the effect.
In that case, I think it's not lost, it's for special effects and special effects.
Another consideration is that, after all, non-IE browser is a minority, even in Firefox (Firefox) no picture over-effects, in fact, nothing,
Still very smooth, but just can't see the beauty of IE inside.
Issue 11: The onclick event under Firefox (Firefox) does not work
<div id= "Bigwhatwedo" ><a href= "Javascript:onclick = display (' Whatwedo ')" target= "" > What we do </a></ Div> under IE no problem, in Firefox (Firefox) Click on no response. Made a number of attempts, replaced by onclick= "display (' Whatwedo ')" Still not, later through a number of checks, the search still can not find the way, finally using the usual method-step by Step alert (); Come out and look at the effect, the original is the wrong value of an ID is incorrectly written, But is it strange that there is no relationship under IE? Is IE's fault-tolerant content too strong or is Firefox's fault-tolerant content too bad? But still like the rigorous and standard of Firefox, ha. Can let people find a lot of deep-seated things. Ha ha.
Issue 12: Firefox (Firefox) Div positioning can not be initialized by JS must first set the value and to set the unit of measure top:80px;left:212px;
Question 13: Firefox cannot use. Click (); method to open the link, finally temporarily solved
<div><a href= "http://blog.163.com/fan_yishan/#" onclick= "test1 (2)" id= "A3_a" >hello</a> </div >
<div>
<a href= "http://blog.163.com/fan_yishan/" onclick = "test2 (1)" id= "B3" >hello2</a></div>
<div><a href= "Javascript:onclick =test2 (1)" id= "B3" >hello3</a> trigger event placed in href= "Javascript:onclick = Test2 (1) "Firefox (Firefox) invalid </div>
<div onclick= "test2 (1)" id= "B3" >hello3</div>
<script language= "JavaScript" >
<!--
function test1 (num)
{
Window.alert (num);
}
function test2 (num)
{
var aaa_a = document.getElementById ("a3_a");
if (document.all) {//if (Getos () = = "MSIE") {//ie processing
Aaa_a.click ();
}
Else
{
var evt = document.createevent ("mouseevents");
Evt.initevent ("click", True,true);
Aaa_a.dispatchevent (EVT);
}
}
/*
Determine browser type
*/
function Getos ()
{
var osobject = "";
if (Navigator.userAgent.indexOf ("MSIE") >0) {
return "MSIE";
}
if (Isfirefox=navigator.useragent.indexof ("Firefox") >0) {
return "Firefox";
}
if (Issafari=navigator.useragent.indexof ("Safari") >0) {
return "Safari";
}
if (Iscamino=navigator.useragent.indexof ("Camino") >0) {
return "Camino";
}
if (Ismozilla=navigator.useragent.indexof ("gecko/") >0) {
return "Gecko";
}
}
-</script>
<!--because the link here is index of the IFRAME with href= "http://blog.163.com/fan_yishan/#" in IE does not display properly,
Instead of using href= "Javascript:onclick = display (' Whatwedo ')" Firefox does not support opening the first link, Firefox must use onclick= "display (' Whoweare ')"
I thought Firefox is a lot of people to use, but from the statistical analysis of the site to see Firefox only poor 3.18%, but compatible with his standards do spend a lot of energy! However, standardization is good for future maintenance and expansion, which is helpful for the continual prompt of technology.
-
Question 14: Overflow-y:auto;overflow-x:hidden, in IE can use No to show hidden, but in Firefox (Firefox) must use hidden
Transfer from http://www.jb51.net/css/33709.html
Firefox Firefox and IE compatibility issues-transparent filter div scroll bar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
