전체 브라우저 요약(IE7/IE8/IE9/SAfari/Chrome/Firefox)

최근에 프로젝트의 업그레이드 작업을 하고 있는데 주로 크로스 브라우저라는 부분에 문제가 생겼고 정리를 했습니다. 여러분과 공유하도록 하겠습니다. 만약에 당신도 비슷한 문제에 부딪히면 어느 정도 도움이 되었으면 합니다.잡담은 그만하고 본론으로 들어가 내가 정리한 순서대로 하자.
1. 브라우저의 버전을 가져오는 것은 매우 중요합니다. 이 작업을 하기 전에 저는 다 썼습니다. 그 과정에서 호환되지 않는 상황이 발생하면 반드시 브라우저의 판단을 해야 합니다.
제가 봉인을 하고 테스트를 거쳤습니다. [IE의 호환 모드는 고려하지 않습니다] 좋아하는 친구는 직접 가져가셔도 됩니다.

var BrowserType =
{
	IE7: "MSIE 7.0",
	IE8: "MSIE 8.0",
	IE9: "MSIE 9.0",
	IE10: "MSIE 10.0",
	Chrome: "Chrome",
	Firefox: "Firefox",
	Safari: "Safari"
};

/// <summary>
/// Get Browser version
/// </summary>
function getBrowserVersion()
{
	if (navigator.userAgent.indexOf("MSIE 7.0") > 0)
	{
		return BrowserType.IE7;
	}
	if (navigator.userAgent.indexOf("MSIE 8.0") > 0)
	{
		return BrowserType.IE8;
	}
	if (navigator.userAgent.indexOf("MSIE 9.0") > 0)
	{
		return BrowserType.IE9;
	}
	if (navigator.userAgent.indexOf("MSIE 10.0") > 0)
	{
		return BrowserType.IE10;
	}
	if (navigator.userAgent.indexOf("Firefox") > 0)
	{
		return BrowserType.Firefox;
	}
	if (navigator.userAgent.indexOf("Chrome") > 0)
	{
		return BrowserType.Chrome;
	}
	if (navigator.userAgent.indexOf("Safari") > 0)
	{
		return BrowserType.Safari;
	}
}

2. IFrame에 관한 질문, 이것은 크로스 브라우저에서 꼭 만나게 될 것입니다. 이것도 두 개의function을 봉하여 공유합니다.

/// <summary>
/// Get iFrame DOM Function [IE、Firefox]
/// </summary>
function getIFrameDOM(id)
{
	var iframeObj = null;
	if (document.getElementById(id) != null)
	{
		iframeObj = document.getElementById(id).contentDocument || document.frames[id];
	}
	return iframeObj
}

/// <summary>
/// Get iFrame Window Function [IE、Firefox]
/// </summary>
function getIFrameWindow(id)
{
	var iframeWindow = null;
	if (document.getElementById(id) != null)
	{
		iframeWindow = document.getElementById(id).contentWindow || document.frames[id].window;
	}
	return iframeWindow;
}

진정으로 사용하는 것은 두 번째 방법이다. iFrame의 window를 취하고, 그 다음에 window의 방법을 호출하는 것이다.
3. IFrame 불러오기 완료에 대한 이벤트 판단 - 이전에 IE의 onreadystatechange를 사용했습니다

if (getBrowserVersion() == BrowserType.IE8 || getBrowserVersion() == BrowserType.IE7)
		{
			$('#framePrintMap')[0].onreadystatechange = function ()
			{
				if (this.readyState == 'loaded' || this.readyState == 'complete')
				{
					var json = jQuery.parseJSON($('#hidDatas').val());
					var options = jQuery.parseJSON($('#hidOptions').val());
					getIFrameWindow('framePrintMap').initPrintMap(json, options);
				}
			}
		}
		else
		{
			$('#framePrintMap')[0].onload = function ()
			{
				if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')
				{
					var json = jQuery.parseJSON($('#hidDatas').val());
					var options = jQuery.parseJSON($('#hidOptions').val());
					getIFrameWindow('framePrintMap').initPrintMap(json, options);
				}
			}
		}
		$('#framePrintMap').attr('src', 'ThematicPrintMap.aspx');

IE7과 IE8이라면 onload 이벤트를 사용할 수 있지만,ready State 대상이 없고, iFrame에서 직접 호출하는 방법을 불러오지 않아 오류가 발생했습니다.IE9이면 이 두 가지 다 돼요. onreadystatechange는 IE만 지원하고 Safari/Chrome/safari는 onload의 가지만 갈 수 있어요. 그런데 왜 하나를 더 넣어요!readyState?Firefox에 ready State 대상이 없기 때문에 이렇게 판단할 수밖에 없다.
4. 크로스 브라우저에서의 Table 자동 스트레칭의 차이점: 나의 다른 글을 참고하십시오 Table 자동 스트레칭은 Chrome과IE의 차이점
5. 각 브라우저의 소수 처리에 관하여: 나의 다른 글을 참고하시오. 각 브라우저의 소수 처리 정돈 상황의 대비
6. 마우스의 위치를 포획하는 브라우저의 차이에 관하여: 나의 다른 글 JavaScript에서 마우스 이벤트의 위치가 각 브라우저의 공통점과 차이점을 참고하십시오
7. Chrome/safari position:absolute에 대한 처리는 다른 브라우저와 다소 다르다. IE와 Firefox는 부모 요소의 내부에 있고 Chrome/safari는 부모 요소를 뛰어나간다.
8. IE7은 다른 브라우저의 text-align:center 처리와 다르다. IE7: 내부의 텍스트와div는 모두 가운데이고 다른 브라우저: 텍스트만 가운데이며 div는 가운데가 아니다. td의 내용을 div 내부에 패키지하면 해결할 수 있다. td내의 div의 css는text-align:left이고 div의 css는text-align:center이며 내부의 텍스트는 가운데에 놓을 수 있다.또 다른 year의 타이틀을 표시하는div도 마찬가지로 설정하면 됩니다.
9. IE7에 대한 IE=EmulateIE7과 IE=7 및 진정한 IE7의 차이점;[브라우저 모드]와 [문서 모드] 간의 차이점을 참조하십시오.
10. 크롬/사파리에서submit을 누르면 백엔드에 데이터를 제출합니다. 데이터 양이 512k를 넘으면 자동으로 차단됩니다. input의 type을hidden으로 바꾸면 됩니다.
11. 부모 용기 설정overflow:auto;하위 요소 설정 속성position:relative;i7에서 이 하위 요소는 스크롤 바를 따라 굴러가지 않습니다:overflow: auto 속성을 설정한 용기에position:relative를 추가하면 됩니다.
12. Safari 다음 시간 Date.Parse 시간이 정확하지 않은 문제: [때로는 정확하고 때로는 정확하지 않다. 테스트에서 2034년이 지난 후에 정확하지 않다는 것을 발견했다.] 이 문제는 브라우저 커널이 제대로 되지 않아서 어쩔 수 없다. 호환하려면 방법을 강구해야 한다.
먼저 날짜를 사용자 정의 표준 형식으로 변경합니다.

Date.prototype.format = function (format)
{
	var o =
	{
		"M+": this.getMonth() + 1, // month   
		"d+": this.getDate(), // day   
		"h+": this.getHours(), // hour   
		"m+": this.getMinutes(), // minute   
		"s+": this.getSeconds(), // second   
		"q+": Math.floor((this.getMonth() + 3) / 3), // quarter   
		"S": this.getMilliseconds() // millisecond   
	}

	if (/(y+)/.test(format))
	{
		format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	}

	for (var k in o)
	{
		if (new RegExp("(" + k + ")").test(format))
		{
			format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
		}
	}
	return format;
}

그리고 이 격식을 해석하는 시간이 필요합니다.

/// <summary>
	/// Time format:2011-10-01 00:00:00 *[SQL:120] || 2011/10/01[SQL:111]
	/// </summary>
	this.dateFromString = function (str)
	{
		var arr = str.split(/[^0-9]/);
		var curTime = null;
		if (arr.length == 3)
		{
			curTime = new Date(arr[0], arr[1] - 1, arr[2]);
		}
		else if (arr.length >= 6)
		{
			curTime = new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4], arr[5]);
		}
		return curTime;
	}

이것은 일반적으로 시간을 원소의 확장 속성에 연결한 다음에 사용할 때, div.data ('time') 를 해석하는 데 쓰인다.
13. Firefox에서는 중첩된 function이 지원되지 않습니다.