Event is an object that IE comes with, and the object is not present in FF, and can only simulate event by passing parameters
In addition, using srcelement in IE to get event trigger source, use target under FF. Therefore, the use of these two objects requires related browser compatibility.
Copy Code code as follows:
View Run Results
Combined with attachevent and AddEventListen
CSS compatibility between IE and FF browsers-Web Standard tutorialI. Use of important in IE6 and FF. Box1 {width: 150px! Important ;}. Box1 {width: 250px ;}! Important indicates that this setting has a priority and IE has encountered it! Important does not make an error. It only ignores its function. If width is set later, ie uses the last width as the standard. If there are no other settings later, the cur
This article mainly introduces the differences between js in IE and FF. For more information, see firefox firebug plug-in.
Ability to set breakpoint execution for js
Ability to modify css styles during runtime
View dom Models
☆The internal bar of IE8 is also very good.
☆Open all js warnings in firefox:Enter: about: config in the address barDouble-click and set javascriptoptionrestict to true. Many warnings are displayed, which is conducive to error c
1. DivCenter problem When div sets margin-left and margin-right to auto, it is already centered,IE doesn't work. IE needs to set the body to center,First, define text-algin: center in the parent element;This means that the content in the parent element is centered.2.Link(Tag)Border and background Add the border and background color to the link. Set display: block and float: left to avoid line breaks.Refer to menubar to set the height of a and menubar to avoid misplacement of the bottom side,If n
Firefox firebug plug-in is recommended for js debugging tools.
Ability to set breakpoint execution for js
Ability to modify css styles during runtime
View dom Models
☆The internal bar of IE8 is also very good.
☆Open all js warnings in firefox:Enter: about: config in the address barDouble-click and set javascriptoptionrestict to true. Many warnings are displayed, which is conducive to error correction.
☆Ie-> firefoxjavascript class
△Document. all ("id")-> document. getElementById ("id ")And the c
For more information, see http://netsos.cnblogs.com/1 ,! Important (limited function)
With IE7! Important Support ,! The important method is only compatible with ie6. (note the writing method. Remember that the declaration position must be in advance .)
For example:
# Example {Width: 100px! Important;/* IE7 + FF */Width: 200px;/* IE6 */}
Ii. CSS hack method (for beginners, let's take a look at it and pass it)
The first thing you need to know i
JS Debugging Tools recommended Firefox Firebug plug-ins
Ability to set breakpoints for JS execution
Ability to modify CSS styles while running
View the DOM model, and so on
☆IE8 's own developerbar is also very good
☆ Turn on Firefox all JS warning:Input in the Address bar: About:configDouble-click to set Javascriptoptionrestict to true to see many warnings for error correction
☆ie->firefoxjavascript class
document.all ("id")->document.getelementbyid ("id")And the controls try to use IDs
default behavior onlyvar preventdefault = function (e) { e = e | | window.event; if (e.preventdefault) { e.preventdefault (); } else{ e.returnvalue = false; }}Get Event Source Objectvar geteventtarget = function (e) { e = e | | window.event; var target = event.srcelement? Event.srcElement:event.target; return target;}Attached: Binding Onpropertychange event Onpropertychange, which is triggered when an element's attribute changes, is typically used to capture its valu
Copy Code code as follows:
A drag effect, according to some of the forum posts changed, but there are some bugs have been unable to solve, who can help me change?
When you drag a layer for the first time, the position of the layer deviates very far.
uh ..... This involves a style problem ...In IE and Firefox, Obj.style is actually just getting the value of the attribute style in the element!
In the following example, you will find that none of the attributes in the style block ca
Object name. AddEventListener ("event name (without on)", function name, true/false);(ff)
Object name. attachevent ("event name", function name);(IE)
Description
Event name, note that "onclick" to Change to "click", "onblur" to "blur", that is, the event name does not take "on".
Function name, remember not to have the last argument with parentheses is a Boolean value that represents the order of response for the event, and the following is an emphasis
More articles can refer to the http://www.jb51.net/tag/event/1.htm
In addition, using srcelement in IE to get event trigger source, use target under FF. Therefore, the use of these two objects requires related browser compatibility.
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
View Run Results
Combined with attachevent and AddEventListener in the last section.
Copy Code code as follo
There may be a slight difference in the conditions triggered by different browsers, and today we say that the focus and blur events of the IFRAME in the Firefox browser will trigger an invalid problem.
Solution:
1: Use Contentwindow, directly using jquery blur and focus, if you use native, add a browser to judge then Attachevent and AddEventListener on the line
The code is as follows
Copy Code
$ ($ (' #frame ') [0].contentwindow). blur (function () {})$ ($ (' #fram
The preliminary judgment is that the Obj.style.backgroundColor returns in FF is the reason of RGB (xxx,xxx,xxx). I am a novice, the code is very vegetable, master don't laugh Ah
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
// Display attributesDisplayPositionFloatClearCursor...
// AttributesMarginPaddingWidthHeight
/* Typographical */Vertical-alignWhite-spaceText-DecorationText-align...
/* Text */ColorFontContent
/* Border backgroundThe reason why boder and background are put at the end is that the modification frequency is more frequent than before, and it is convenient to view them at the end. */BorderBackground}
ProgramCode:
. Class {Background-color: # FFFF00;/* all browsers */* Background-co
. Other compatibility skills
1. Setting padding for Div under FF will increase the width and height, but IE will not. (available! Important solution)2. center problem.1). Vertical center. Set line-height to the same height of the current Div, and then use vertical-align: middle. (Note that do not wrap the content .)2). horizontal center. Margin: 0 auto; (of course not omnipotent)3. To add a style to the content of tag a, set display: block)4. The diff
FAQs about compatibility with IE6 IE7 FF in Div + CSS layout
General use of all browsers (IE6 IE7 FF mainly used in the market)
Height: 100px; dedicated for IE6
_ Height: 100px; dedicated for IE6
* Height: 100px; dedicated for IE7
* + Height: 100px; shared by IE7 and FF
Height: 100px! Important;
I. CSS compatibility
The following two methods can solve almost all
Question about ie6.7.8.ff compatibility time: 2010-09-07 Source: Author: Click: a post I read eight times ago. It feels useful, O (∩ _ ∩) o... suitable for cainiao! ~~ For a long time, the source address cannot be found, and friends who know it can post it !~~
As a front-end development engineer, you should note that the most common problem encountered during interface layout is that CSS styles are compatible with different browsers, especially for
InWebsite DesignPay attentionCSS style compatibilityDifferent browser problems, especially those designed for completely using Div CSS, should pay more attention to IE6 IE7 FF's compatibility with CSS styles. Otherwise, your network may be out of chaos and do not want to have any effect!General height of all browsers: 100px;IE6 dedicated _ Height: 100px;IE6 dedicated * Height: 100px;IE7 dedicated * + Height: 100px;IE7 and FF share Height: 100px! Impor
application is complicated, there are some links in each column. When the DIV application is complicated, it is prone to the "hide and seek" issue.Some content cannot be displayed. When you select this area, the content is displayed on the page. Solution: Use the line-height attribute for # layout.Or use fixed height and width for # layout. The page structure should be as simple as possible.8. Float Div closure; clear floating; adaptive height;
① Example: Id = "notfloatc"> The notfloatc here do
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.