デザインの崩れ

原因:ブラウザによる解釈の違い

・width:border~border
・width:paddingより内側~paddingより内側

古いブラウザに合わせて表示する事を [ 互換モード ]
W3Cの使用に合わせて正しく表示する事を [ 標準準拠モード ]

DOCTYPEスイッチ

■互換モード、DOCTYPE無
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

■標準準拠
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Strict //EN”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<?xml version=”1.0″ encoding=”文字コード”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

1.テーブルボーダー1pxのズレを無くす方法

・「<table cellspacing=”0″>」
・border-collapse: separate;
・border-spacing: 0;

・IE、Safari、Chrome、Operaなど、Firefox以外なら「border-collapse: collapse;」

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です