기준이 1920인 width: 500px;
를 vw로 변경 할 경우
:root {
--vw-base: 1920;
}
.foo {
width: calc(500 * 100vw / var(--vw-base));
}
기준이 1920인 width: 500px;
를 vw로 변경 할 경우
:root {
--vw-base: 1920;
}
.foo {
width: calc(500 * 100vw / var(--vw-base));
}
android 4.*버전의 android 브라우저에서 -webkit-appearance
사용시 video태그의 기본 컨트롤의 스타일이 무너지는 현상
html 셀렉터를 이용하여 해결필요
[css]
html input[type="button"] {
-webkit-appearance: none
}
[/css]
몇몇 안드로이드에서 touchstart
같은 touch전용 이벤트가 걸린 엘리먼트 위에 pointer-events: none;
가 걸린 엘리먼트를 위에 띄울경우 touch이벤트가 안먹는 문제가 발생.
n | 2n+1 | 4n+1 | 4n+4 | 4n | 5n-2 | -n+3 |
---|---|---|---|---|---|---|
0 | 1 | 1 | 4 | – | – | 3 |
1 | 3 | 5 | 8 | 4 | 3 | 2 |
2 | 5 | 9 | 12 | 8 | 8 | 1 |
3 | 7 | 13 | 16 | 12 | 13 | – |
4 | 9 | 17 | 20 | 16 | 18 | – |
5 | 11 | 21 | 24 | 20 | 23 | – |
머리가 안돌아가서 적어둠….
IE8로 넘어 오면서 호환성모드를 ms에서 추가 하였습니다.
아래의 소스와 같은 방식으로 호환성 모드를 동작시킬수가 있습니다.
[html]
<meta http-equiv="X-UA-Compatible" content="IE=9" />
[/html]
헌데 IE10에서 자바스크립트로 태그의 속성을 체크 할경우 문제가 생깁니다.
html5에서 추가된 placeholder
같은 IE10에서만 동작하는 속성의 경우 호환성 모드가 추가될 경우 아래와 같은 방법으로는 속성값을 뽑아오지 못하고 undefined
를 뿌려주는 문제가 생기게 됩니다.
[html]
<input type="text" id="input" placeholder="ID를 입력해주세요." />
<srcipt type="text/javascripty">
alert(document.getElementById(‘input’)[‘placeholder’]);
//undefined
</script>
[/html]
해결 방법은 아래와 같이 attributes
를 사용하여 값을 뽑아오면 되겠습니다.
[js]
alert(document.getElementById(‘input’).attributes[‘placeholder’].value);
[/js]
IE는 10이 되서도 문제를 일으키는군요.ㅠ