�ȉ��̕����̓E�F�u����҂ɂƂ��Ĕ��ɗL�p�ȕ����ł������A�T�C�g���̂����ł��Ă����悤�Ȃ̂ŃL���b�V������T���x�[�W���܂����B ���̕��������J���邱�Ƃɂ��Ă͖|��҂��܂փ��[���ŘA�����Ƃ��Ă��܂����A�܂����ԓ����Ă��܂���B�Ȃ̂ŁA�\���o�ɂ���Ă͌��J���~�߂�\��������܂��B������肪����܂����� eiji.fukushima@gmail.com �܂ł��A�����������B
�܂��A�ȉ��̕����́A�قڌ��̂܂܂Ŏ�������Ă���܂���B�]���ă����N�ꂵ�Ă�����̂�����܂��B�܂��A�摜�̓T���x�[�W�ł��܂���ł����B
CSS Hints for Internet Explorer 5
���������悭�m���Ă���悤�ɁAWindows �� Macintosh �ł� Microsoft Internet Explorer 5 �͂��ꂼ��قȂ�`��G���W���������Ă���A���̂��ߓ��� HTML �� CSS �ɂ��Ⴄ���������܂��B����́A�E�F�u����҂͗����̃u���E�U�œ���m�F�����Ȃ���Ȃ�Ȃ����Ƃ��Ӗ����܂��B�ЂƂ̊��ł��܂��\���ł�������Ƃ����āA���̃u���E�U�ł������悤�ɕ\���ł���Ǝv�����ނ��Ƃ͂ł��܂���B
��ʓI�ɁAMac �ł� IE �́A��茵�i�ɃE�F�u�W���d�l�ɏ]���Ă���A�Ή����Ă��܂��B���̈���AWindows �� IE �� Microsoft �Ǝ��d�l�̃X�^�C���� JScript ���\�b�h�ɑΉ����Ă��܂��B�����āAMac �ł� CSS �Ή��Ɋւ��Ă͑傫����Ă��܂��B�Ⴆ�AWindows �ł������Ɏ��s�ł��Ȃ� position:fixed ���T�|�[�g���Ă��܂��B
Mac �� IE �́A���̑����̃u���E�U�Ɠ����悤�Ƀo�O����قȐ��Ȃ������Ă���A�����ƒm��Ȃ��E�F�u����҂����܂Â����܂��B���̋L���́A�悭��������R�̃^�C�v�̖��ɂ��ċL�q���Ă��܂��B
position:relative �֘A�̃o�O
margin ���o������o�O
overflow �錾�����s����ۂ̃o�O
�����̃o�O�́AOS 9 �� OS X �̗����̃v���b�g�t�H�[���ɂ����� Mac�� IE 5 �̑S���̃o�[�W�����Ŕ������܂��B
�K���Ȃ��ƂɁA�E�F�u����҂͂����̕s��ɑR�������܂��B�𗧂� CSS �n�b�N���g���A�u���E�U�U�蕪���� CSS �����ɗ���Ȃ��Ă�����ȃX�^�C�����`�ł���悤�ɂȂ�܂��B
�g����: MacIE �́A CSS �R�����g�����o�b�N�X���b�V�� \ �𐳋K�\����ǂނ��̂悤�Ɏ��̕����̃G�X�P�[�v�R�[�h���Ɖ��߂��܂��B���̂܂������������̍D�s���Ȃ��Ƃ́A�R�����g�̏I�_�}�[�J�[���G�X�P�[�v�ł��邱�Ƃł��B�ȉ��̂悤�ɂ���� IE �� �X�^�C���w��𐳂�����͂ł��Ȃ��Ȃ�܂��B
�v�f {
�X�^�C�� : MacIE�p ;
}
/*
�R�����g�̏I�_���G�X�P�[�v���ꂽ�R�����g�ł��B
�ȉ��̃X�^�C���� IE �ɂ̓R�����g�̈ꕔ�ƌ��Ȃ����
�ǂݍ��܂�܂���B
\*/
�v�f {
�X�^�C�� : ���̃u���E�U�p�B�O�L�̃X�^�C���w����㏑���B;
}
/*
���x�̃R�����g�́A���ʂ̏I�_�����R�����g�ł��B
IE �͂��̃R�����g�̏I�_��O�̃R�����g�̏I�_�ƌ��Ȃ��܂��B
*/
����� IE �̂��߂̃X�^�C����`�����āA���̃u���E�U�̂��߂ɂ͂�����㏑���ł���悤�ɂȂ�܂����B���̃n�b�N�ő����� CSS �֘A�̕s��������ł��܂��B
position:relative �֘A�̃o�O �i��Ғ�: �ȉ��̕��͂� CSS ���L���Ȏ��o�u���E�U�Ō��邱�Ƃ�O��ɏ�����Ă��܂��j
position �v���p�e�B�ɂ�4��ނ̒l�istatic, relative, absolute, fixed�j�̂����ЂƂ��w�肵�܂��Bstatic �̓f�t�H���g�̒l�ł��Bfixed �͂܂� Windows�� IE �͑Ή����Ă��܂���B�E�F�u����҂͂悭 position:absolute ���g���Aposition:relative �������X���ɂ���܂��B
�v�f�ɑ��ΓI�Ȉʒu�w���^�����Ƃ��A���̗v�f�͍ŏ��̓y�[�W���ʂ̈ʒu�ɒu����܂����A�V���� top �� left �v���p�e�B���`���邱�Ƃňړ����܂��B�Ⴆ�A���̒i���� top �� left �� 10px �ɂ����̂ŁA������Ƃ����߂Ɉړ����Ă��܂��B
���̌��ʂ͋ɂ߂ėL�p�ł��B�����L�p���ƌ����A���Δz�u���ꂽ�v�f�� position:absolute �Ő�Δz�u���ꂽ�v�f�̃R���e�i�ɂȂ邱�Ƃł��B��������ȃX�^�C���̗v�f���������Ƃ��܂��B
�v�f {
position: absolute;
top: 10px;
left: 100px;
}
�c����͒ʏ�u���E�U�E�B���h�E�̍�������� 100,10 �̍��W�ɔz�u����܂��B�������A���̗v�f�̑c��v�f�� position:static �ȊO�̎��A�v�f�͂��̑c��v�f���瑊�ΓI�Ȉʒu�ɔz�u����܂��B
���̂悤�ɁAposition:relative �ő��Δz�u�����v�f�́A��Δz�u�����v�f�̃R���e�i�Ƃ��Ďg�����Ƃ��ł��܂��B
���s����
���s����
����ɁA���̒i���𑊑Δz�u���܂����B �܂��Aem�v�f�� 100,10 �̍��W�ɐ�Δz�u���܂����i�u����͋����v�̕����j�B���W�́A�u���E�U�E�B���h�E�̍�����ł͂Ȃ��A���̒i���̍��������_�Ƃ��ėp���܂��B������ em �͂��̒i�����ɂ܂�����̂ł��B
����͋����B
position:relative �͂��̂悤�Ȍ��ʂ̂��߂ɗp�����邾���łȂ��A���܌��ꂵ���T�C�h�G�t�F�N�g�� IE �ɗ^���܂��B�ȉ��̒ʂ�ł��B
�o�O: ���Δz�u���ꂽ�v�f�̓����ɂ���v�f�́A�e�v�f���� position �̒l�� left �� right �v���p�e�B���܂��������`�Ōp�����܂��i���� top �� bottom �͌p�����܂���j�B
��:
div#container {
position: relative;
border: 1px solid #000000;
top: 50px;
left: 50px;
width: 200px;
}
.testdiv {
position: static;
border: 1px solid #000000;
background-color: #ffffff;
padding: 10px;
margin: 0px;
}
�R���e�i�̓����� <DIV> �� position �v���p�e�B�͖����I�� static �Ɏw�肵�܂����B�������`��͈ȉ��� Mozilla �̃X�N���[���V���b�g�ł��B

MacIE 5 �ł́A���̂悤�ȕ`��ɂȂ�ł��傤�B

�s���Ȃ��ƂɁAIE �͂��ׂĂ� DIV �v�f�i�ŏ��̂ЂƂȊO�j�� 50px �E�Ɉړ����܂��B���̂悤�� DIV �v�f�� position�irelative�j�� left�i50px�j�v���p�e�B�̒l��e�v�f����p�����܂��B
�����@: �����B�K���ɂ��A���̂悤�ȃX�^�C���ɂ�����v�͂���قǑ傫������܂���B
�o�O: position ���`���Ă��Ȃ��i�]���� static �ƂȂ�j�e�[�u�����̐�Ύw�肵���v�f��z�u����Ƃ� IE �̓e�[�u���� position:relative �ł��邩�̂悤�ȋ�����������܂��B��Δz�u����v�f�̍��W�́A�y�[�W�̍�����ł͂Ȃ��A�e�[�u���̍��������̑��ΓI�Ȓn�_�ɂȂ�܂��B�e�[�u���� position:static �L���Ē�`���Ă��A���̖��͉���ł��܂���B
��: �ȉ��̃X�N���[���V���b�g�̂悤�ɁA�N���X container �����v�f�̓e�[�u���ŁA�N���X testdiv �̗v�f�͂��̃e�[�u���Z���̂ЂƂ̒��ɂ���܂��B
<table class="container" border=2>
<tr>
<td>
Blah!
<div class="testdiv">
This is the test DIV in the table
</div>
</td>
<td>
Blah!
</td>
</tr>
</table>
.container {
position: static;
margin-top: 50px;
border: 1px solid #000000;
}
.testdiv {
position: absolute;
top: 50px;
left: 50px;
border: 1px solid #000000;
padding: 10px;
}
testdiv �́A�R���e�i�� position:static �Ȃ̂Ńu���E�U�E�B���h�E���瑊�ΓI�ɔz�u����Ȃ���Ȃ�܂���B
Opera 6 �͐������`�悵�܂��Btestdiv �͊��S�Ƀu���E�U�E�B���h�E���瑊�ΓI�ɔz�u����A�e�[�u���̈ʒu�ɉe������܂���B

�������AIE �͂��������e�[�u���� position:relative �w�肪����Ă邩�̂悤�ɁA�e�[�u�����瑊�ΓI�Ȉʒu�� testdiv ��z�u���܂��B�܂��A<DIV> �͂��������e�[�u���̓����Ƀt�B�b�g���邭�炢�ɏ������k�݂܂��B

�i�ʔ������ƂɁAMozilla �ɂ͐������o�O������܂��BMozilla �́A�e�[�u���� position:relative �ł��鎞���A�e�[�u�������̐�Δz�u�v�f���e�[�u�����瑊�ΓI�ɔz�u���邱�Ƃ��ł��܂����B �j
�����@: �����B�e�[�u�������̗v�f���Δz�u���Ȃ��悤�ɂ��܂��傤�B
�o�O: ��Δz�u�v�f���u���E�U�E�B���h�E�̉E�������͒�̂ւ�ɔz�u����ƁA��� margin ���������A�s�K�v�ȃX�N���[���o�[���o�����錴���ƂȂ�܂��B
��:
div.container {
height: 150px;
width: 200px;
position: absolute;
right: 0px;
border: 1px solid #000000;
background-color: #ffffff;
}
���� <DIV> �͉E�[�ɐڂ��ĕ\������܂��B�ق��Ƀy�[�W�̒��g�͖����̂ŃX�N���[���o�[�͕s�v�ł��B����� Mozilla �͐������z�u���܂��B

IE ���������z�u���܂����A�����������ɖ��p�̉E�}�[�W�������A�s�K�v�ȉ��X�N���[���o�[���o�������܂��B

���� <DIV> ��15�s�N�Z���̗]�v�ȉE�}�[�W���������������A����15�s�N�Z���́A�X�N���[���o�[���Ƃ܂����������ł��B�ɂ��ւ�炸�A�ǂ̂悤�ȏŃX�N���[���o�[���}�[�W���̒��ɒu����邩��������̂͗e�Ղł͂���܂���B���̃X�N���[���o�[�X�y�[�X�̂܂������������̃o�O�̊W�́A���炩�ɂȂ��Ă͂��܂���B
�����@: right �v���p�e�B�̒l�� 15px �ɂ��āA�E�}�[�W���� -15px �Ɏw�肵�܂��B
div.container {
height: 150px;
width: 200px;
position: absolute;
right: 15px;
margin-right: -15px;
border: 1px solid #000000;
background-color: #ffffff;
}
���̌��ʂ͈ȉ��̒ʂ�ł��B

�ق��̃u���E�U�� IE �Ɠ�������������̂ŁA���̑����@�̓N���X�u���E�U�݊����ɂقƂ�ǖ��͂���܂���iWindows 2000 ���ł� Mozilla �������B���܂�1�s�N�Z���̂킸���ȃ}�[�W�����o�Ă��܂��܂��j�B
�v�f���u���E�U�E�B���h�E�̒�ɔz�u����ۂɂ������o�O���������܂��B���̏ꍇ�Amargin-bottom �� -15px �Ɏw�肵�Ȃ���Ȃ�܂���B
���� margin �̃o�O�͖��炩�ɃX�N���[���o�[�Ɋւ����̂ł��B�s�K�ɂ��A��ɂł͂���܂����قƂ�ǂ̏ꍇ���̃o�O�͕\��܂��B1������2���̊m���� IE �͈ȉ��̂悤�ȃX�^�C���𐳂������߂��܂����A�����[�h�ł܂��ς��Ă��܂��ł��傤�B
�o�O: IE �̓X�N���[���o�[���̗̈���\�������ɑ����Ă���Ƃ܂������ĔF�����܂��B�y�[�W�̒��g�͏c�X�N���[���o�[�̉��ɂ݂͂łāA����ɂ���ĕs�K�v�ȉ��X�N���[���o�[���\��܂��B
��:
body {
margin: 0px;
padding: 0px;
font: 12px helvetica;
}
div.container {
height: 150px;
width: 100%;
overflow: auto;
-moz-box-sizing: border-box;
}
p {
border: 1px solid #000000;
}
�R���e�i�ƂȂ� <DIV> �̍�����150�s�N�Z���A����100%�Aoverflow:auto �Ƃ��A�K�v�ł���X�N���[���o�[��\������悤�ɂ��܂����B-moz-box-sizing �� Mozilla �̃{�b�N�X���f������������邽�߂̂��̂ł��B
���Ɏw�肵�Ȃ���A<P> �v�f�͏�Ɏg�������̉��� 100% �����A�����̓R���e�i <DIV> �̑傫���ɂ҂����艈���܂��B�����āA�{�b�N�X�ɂ�������ׂ̍� P ���܂܂��X�N���[���o�[�������܂��B���̎� P �́ADIV �̍��}�[�W������X�N���[���o�[�̍��[�ɉ����悤�ɁA������ω����Ȃ���Ȃ�܂���B
Mozilla �ł́A���̃X�^�C���͖]�ʂ�ɂȂ�܂��B

������ IE �ł͂���ȕ\���ɂȂ�܂��B

P �͏c�X�N���[���o�[��˂������ĉ������R���e�i�̉E�[�ɉ��킹�܂��B����ɂ���ăy�[�W�̒��g�̈ꕔ�͏c�X�N���[���o�[�̉��ɉB��Ă��܂��AIE �͉��X�N���[���o�[������邱�ƂƂȂ�܂��B
�����@: ��{�I�������@�́ADIV ��16�s�N�Z���� padding-right �������邱�Ƃł��B
div.container {
height: 150px;
width: 100%;
overflow: auto;
-moz-box-sizing: border-box;
padding-right: 16px;
}
�ł�����������A���̃u���E�U�ɂƂ��ė]�v�� padding ���B���Ȃ���Ȃ�܂���B�K���Ȃ��ƂɃR�����g���̃o�b�N�X���b�V���ɂ��n�b�N�ŁApadding-right �̒�`�� MacIE �݂̂Ɍ��肷�邱�Ƃ��ł��܂��B
div.container {
height: 150px;
width: 100%;
overflow: auto;
-moz-box-sizing: border-box;
padding-right: 16px;
}
/* �R�����g���o�b�N�X���b�V���̃n�b�N�� \*/
div.container {padding-right: 0px;}
/* �n�b�N�I��� */
����ŁAIE �� padding-right �� 16�s�N�Z���A���̃u���E�U��0�s�N�Z���Ƃ��邱�Ƃ��ł��܂����BP �v�f�̓X�N���[���o�[�̍��[�ɉ����悤�ɂȂ�ADIV �̉��X�N���[���o�[�͂����K�v�Ȃ��̂ŕ\������܂���B

�c�O�Ȃ��m�点�ł��B����{�������Ƃłӂ��̐V���ȕs�K�v�Ȍ��ʂ��łĂ��Ă��܂��܂����B
P ���������ɑ��� P ���Z���Ȃ��Ă��܂��B���ہA����� padding-left ��K�p����O���炷�łɂ���܂����B�O�̃X�N���[���V���b�g�ŁA�ŏ��� P �͐����������i���[����X�N���[���o�[�܂Łj�ɂȂ��Ă��܂����B�y�[�W�S�̂̃X�N���[���o�[�̐����錴���́A�܂��O�L�́u�]����15�s�N�Z���̃}�[�W���v�ɂ����̂ł��Bmargin-right �̃n�b�N�ł��̖��͉������܂��B
div.container {
height: 150px;
width: 100%;
overflow: auto;
-moz-box-sizing: border-box;
padding-right: 16px;
margin-right: -15px;
}
�����Ă��̌��ʂł��B

�s�K�Ȃ��ƂɁA�܂��ŏ��� P �̖�肪����܂��B�ŏ��̃u���b�N�v�f�́A�}�[�W���̃o�O�ɉe������܂���B�X�N���[���V���b�g�������悤�ɁA�ŏ��� P �����͉��X�N���[���o�[�̉��ɓ����Ă��Ȃ��̂ŁApadding-right �ŕs�K�v�Ȍ��Ԃ��ł��Ă��܂��̂ł��B���������̖��i�̌��@�j�͈�ѐ�������܂���B�قƂ�ǂ̏ꍇ�A�ŏ��� P �͐������U�镑���܂����A���X�����͂Ȃ�܂���B
�ȉ��� Mac OS X �ł� IE 5.2 �����̉�����ł��BOS 9 �łł́A�܂����������悤�ɂ͓����܂���B���̍�Ƃ́A<DIV> �̍ŏ��̎q�v�f�� -16px �� margin-right ��^���邱�Ƃł��B
div.container>:first-child {
margin-right: -16px;
}
�c�����Ă܂��R�����g���̃o�b�N�X���b�V���ɂ��n�b�N�ő��̃u���E�U�p�̃X�^�C�����㏑�����܂��B����Ŋ����� CSS �ɂȂ�܂��B
div.container {
height: 150px;
width: 100%;
overflow: auto;
-moz-box-sizing: border-box;
padding-right: 16px;
margin-right: -15px;
}
div.container>:first-child {
margin-right: -16px;
}
/* �R�����g���o�b�N�X���b�V���̃n�b�N�� \*/
div.container {padding-right: 0px;}
div.container>:first-child {
margin-right: 0px;
}
/* �n�b�N�I��� */
����ŁA�ʏ�͂��̂悤�ɉ�������܂��B

������x�O�������܂��ƁA������A�̃o�O�͂��C�܂���ɋN���܂��B���� CSS �n�b�N���S�R�����Ȃ���������܂��B
�o�O: <DIV> ���� <P> ��z�u����Ƃ��ɁA<DIV> �� <P> �� margin-bottom �̒l���t�p�� ���܂��B
��:
div.container {
height: 100px;
width: 90%;
border: 1px solid #000000;
margin: 0px;
}
p {
margin-top: 0px;
font-size: 20px;
border: 1px solid #000000;
}
���̃X�^�C���͈ȉ��̂悤�ɕ\������Ȃ���Ȃ�܂���iMozilla �ł̃����_�����O�j�B<DIV> �̊O�ɂ���ŏ��� <P> �� <DIV> �̃{�[�_�[�ɐڂ��܂��B

������ IE �ł́A<DIV> �͓����̍Ō�̎q�v�f�� <P> �� margin-bottom �̒l���t�Ɍp�����āA�s�K�v�Ȍ��Ԃ��ł��錴���ɂȂ��Ă��܂��܂��B���̎��̃}�[�W���ʂ� <P> �̕����̑傫������ł��B

�����@: P�v�f�� margin-bottom ��0�s�N�Z���Ɏw�肷��B
overflow �錾�́A�v�f�̂͂ݏo���������ǂ̂悤�Ɉ��������`���܂��B�v�f����߂�ꂽ���ƍ����������Ă��āA��`���ꂽ�̈�ɒ��g�������܂肫��Ȃ��Ƃ��A3�̎�舵����������܂��B
overflow:visible �ŁA���g�̓{�b�N�X����͂ݏo�ĕ\������܂��Boverflow:hidden �ŁA�{�b�N�X�ɂ����܂�Ȃ����g�͊��S�ɉB��āA���[�U�ɂ͗��p�ł��Ȃ��Ȃ�܂��Boverflow:auto �ŁA�{�b�N�X�͕K�v�ɉ����ăX�N���[���o�[��\�����܂��B���̃X�^�C���͑O�o�̃R�[�h�̗�ŗp���܂����B��4�̒l�Aoverflow:scroll �́A�K�v�̗L���Ɋւ�炸��ɃX�N���[���o�[��\�����܂��B�E�F�u����҂͂߂����ɂ�����g�p���邱�Ƃ͂Ȃ��ł��傤�B
�o�O: �v�f�ւ� overflow �v���p�e�B�̒l�� visible �ȊO�̂Ƃ��A�v�f�̒��g���蔲����܂���B���̑�����e�̓y�[�W��ɑ��݂��i�����Ȃ����j�A�X�N���[���o�[�������܂��B
��: �u�B�ꂽmargin�v�Ŏg�p�����R�[�h�̗�ɂ����� P�v�f��lj�����ƁA�s�K�v�ȃX�N���[���o�[���Ăѕ\��܂��B����̓y�[�W�S�̂̏c�X�N���[���o�[�ł��B

<DIV> �̗]�v�Ȓ��g�́Aoverflow:auto �Ɛ錾�����ɂ��ւ�炸�A�y�[�W�S�̂ɂ͂ݏo�ăX�N���[���o�[���܂��B�i�ŏ��̎q�v�f�� P ���Ăт��������Ȃ��Ă��邱�Ƃɂ����ӂ��Ă��������B����͔��ɖ��ȃo�O�ł��B�j
�����@: body�v�f�� overflow:hidden �Ǝw�肵�Ă��������B���̑�ɂ�莟�̃o�O�������͈̂ȉ��̒ʂ�B
�o�O: body�v�f�� overflow �v���p�e�B�̒l�� scroll �������� hidden �ɂ���ƁA���̌㓯���E�B���h�E��t���[���ɓǂݍ��y�[�W�ɃX�^�C������щ��܂��B����͕��ʂɋN���܂����A��ɋN����킯�ł͂Ȃ����Ƃɒ��ӂ��Ă��������B
�����@: �����t���[����E�B���h�E�ɕ\�������y�[�W�ɁAoverflow:auto �Ɩ��L���邱�Ƃŏ����l�ɖ߂��܂��B
�o�O: overflow �̒l�� visible �ȊO�ɂ����v�f�� padding �X�^�C�����w�肷��ƁApadding ���̃n�C�p�[�����N���N���b�N�ł��Ȃ��Ȃ�܂��B
��:
.container {
width: 200px;
height: 200px;
overflow: auto;
padding: 50px;
}
���̃X�^�C���́A�O�q�̖��ʂȃX�N���[���o�[�̃o�O�������Ă͐������`�悳��܂��B

�������Apadding �̈���ɂ��Ԃ郊���N�̓N���b�N�ŗ��܂���B���ӂ���̂́A�Apadding �� �R���e�i�̌�����͈͂̒[����Z�o����邱�Ƃł��B�B�܂��X�N���[������Ă��Ȃ��� padding-bottom ���\������Ă��Ȃ��Ă������Ȃ�܂��B

�����@: �{�b�N�X�̒��g�̗v�f�Ƀ}�[�W�������āA������܂ގ��g�� padding �� 0 �Ɏw�肵�܂��B
Mac �� Internet Explorer 5 �́AMicrosoft ���̃u���E�U���ōł��E�F�u�W���݊����������ɂ��ւ�炸�A�������� CSS �Ɋւ�����_������܂��B�c�O�Ȃ���A�����̃o�O�����{�I�Ȍ����Ɗ֘A�Â��邱�Ƃ͂ł����A�]���ē���������҂��邱�Ƃ��ł��܂���B
�o�O���������ŗǂ̕��@�́A���ׂẴT�C�g�� IE 5 �Ńe�X�g���邱�Ƃł��B���������ꂾ������Ă��A��ŕs���Ȍ��ۂ��N����ł��傤�B���� IE 6 �������[�X�����悤�]�ނ�������܂���B