Home > Web Front-end > CSS Tutorial > JAVASCRIPT Compatible writing records in IE and FF_Experience exchange

JAVASCRIPT Compatible writing records in IE and FF_Experience exchange

WBOY
Release: 2016-05-16 12:04:20
Original
1316 people have browsed it
png transparent AlphaImageLoader
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL)

enabled: Optional. Boolean. Sets or retrieves whether the filter is active. true: default value. Filter activated. false: filter is disabled.
sizingMethod: optional. String. Sets or retrieves how the image of the filtered object is displayed within the boundaries of the object container. crop: Crop the image to fit the object size. image: default value. Increase or decrease the size bounds of the object to fit the dimensions of the picture. scale: Scale the image to fit within the object's size boundaries.
src: required. String. Specify a background image using an absolute or relative URL address. If this parameter is omitted, the filter will have no effect.

firefox cannot support innerText
firefox supports innerHTML but not innerText. It supports textContent to implement innerText, but the extra spaces are also retained by default. If textContent is not used, innerHTML can be used instead if the string does not contain HTML code.

Prohibit selection of web content
In IE, js is generally used: obj.onselectstart=function(){return false;}
And firefox uses CSS:-moz- user-select:none

Filter support (eg: transparency filter)
IE: filter: alpha(opacity=10);
firefox: -moz -opacity:.10;

Capture events
IE: obj.setCapture(), obj.releaseCapture()
Firefox: document.addEventListener("mousemove", mousemovefunction,true);
document.removeEventListener("mousemove",mousemovefunction,true);

Get the mouse position
IE: event.clientX, event.clientYfirefox: The event function is required to pass the event object
obj.onmousemove=function(ev){
X= ev.pageX;Y=ev.pageY;
}

Boundary issues with elements such as DIV
For example: setting the CSS of a div::{width:100px;height:100px;border:#000000 1px solid;}
In IE: the width of the div (including Border width): 100px, div height (including border width): 100px;
And firefox: div width (including border width): 102px, div height (including border width): 102px;

Determine browser type
var isIE=document.all ? true : false;
I wrote a variable, if it supports document.all syntax then isIE=true, otherwise isIE=false

CSS processing under different browsers
Generally, you can use !important to prioritize the use of css statements (only supported by firefox)
For example: {border-width:0px !important;border-width:1px;}
This element has no border under Firefox, but the border width is 1px under IE

document.formName.item("itemName") Problem
Problem description: Under IE, you can use document.formName.item("itemName") or document.formName.elements ["elementName"]; under Firefox, you can only use document.formName.elements[" elementName"].
Solution: Use document.formName.elements["elementName"] uniformly.

Problem with collection objects
Problem description: Under IE, you can use () or [] to obtain collection objects; under Firefox, you can only use [] to obtain collection objects. .
Solution: Use [] uniformly to obtain collection objects.

Custom attribute problem
Problem description: Under IE, you can use the method of getting regular attributes to get custom attributes, or you can use getAttribute() to get custom attributes; Under Firefox, you can only use getAttribute() to obtain custom attributes.
Solution: Get custom attributes through getAttribute().

eval("idName") problem
Problem description: Under IE, you can use eval("idName") or getElementById("idName") to get the id as idName HTML object; under Firefox, you can only use getElementById("idName") to obtain the HTML object with the id of idName.
Solution: Use getElementById("idName") uniformly to obtain the HTML object with id as idName.

The problem that the variable name is the same as the ID of an HTML object
Problem description: Under IE, the ID of the HTML object can be used directly as the variable name of the subordinate object of document, but under Firefox No; under Firefox, you can use the same variable name as the HTML object ID, but not under IE.
Solution: Use document.getElementById("idName") instead of document.idName. It is best not to use variable names with the same HTML object ID to reduce errors; when declaring variables, always add the var keyword to avoid ambiguity.

const problem
Problem description: Under Firefox, you can use the const keyword or the var keyword to define constants; under IE, you can only use the var keyword to define constants.
Solution: Use the var keyword uniformly to define constants.

Input.type attribute problem
Problem description: The input.type attribute under IE is read-only; but the input.type attribute under Firefox is read-write.
Solution: Do not modify the input.type attribute. If you must modify it, you can hide the original input first, and then insert a new input element at the same position.

window.event problem
Problem description: window.event can only be run under IE, but not under Firefox. This is because Firefox's event can only be run under the event On-site use occurs.
Solution: Add the event parameter to the function where the event occurs, and use var myEvent = evt?evt:(window.event?window.event:null)
Example in the function body (assuming the formal parameter is evt) :
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template