jpskill.com
🛠️ 開発・MCP コミュニティ

ie6-hacks

Internet Explorer 6 向けの CSS や JavaScript の互換性パターンをまとめたもので、古いコードの特定、CSS パターンの解明、非推奨の回避策監査などに役立ち、レガシーシステムを現代化する際に活用できるSkill。

📜 元の英語説明(参考)

Internet Explorer 6 CSS and JavaScript compatibility patterns reference. Use when identifying legacy browser-specific code for removal during codebase modernization, explaining unusual CSS patterns in legacy systems, or auditing stylesheets for deprecated workarounds.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Internet Explorer 6 向けの CSS や JavaScript の互換性パターンをまとめたもので、古いコードの特定、CSS パターンの解明、非推奨の回避策監査などに役立ち、レガシーシステムを現代化する際に活用できるSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o ie6-hacks.zip https://jpskill.com/download/9737.zip && unzip -o ie6-hacks.zip && rm ie6-hacks.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9737.zip -OutFile "$d\ie6-hacks.zip"; Expand-Archive "$d\ie6-hacks.zip" -DestinationPath $d -Force; ri "$d\ie6-hacks.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して ie6-hacks.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → ie6-hacks フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

IE6 互換性パターンのリファレンス

レガシーコードベースから Internet Explorer 6 の CSS および JavaScript 互換性パターンを特定し、削除するための技術的なリファレンスです。

この Skill を使用するタイミング

  • 安全に削除できる IE6 固有のコードを特定する
  • レガシーコードベース内の異常な CSS パターンを説明する
  • 非推奨のブラウザの回避策についてスタイルシートを監査する
  • レガシーコードベースを最新化する

削除のガイドライン

ここに記載されているすべての IE6 パターンは、最新のコードベースから安全に削除できます。IE6 の使用率は事実上ゼロです。削除後、意図しない副作用がないことを確認するためにテストしてください (一部のハック、例えば zoom: 1 は、時々無関係な問題を修正していました)。

1. Star-HTML ハック

特定

* html .selector { }
* html #id { }
* html body .class { }

問題点

IE6 は誤って <html> を DOM 内に親要素があるかのように扱ったため、* html が一致しました。標準に準拠したブラウザは、html がルート要素であるため、このセレクタを正しく無視します。

例

/* 修正前: IE6 ハックが存在する */
.sidebar {
  margin-left: 200px;
}
* html .sidebar {
  margin-left: 180px;
}

/* 修正後: * html ルールを完全に削除する */
.sidebar {
  margin-left: 200px;
}

修正

* html で始まるルールをすべて削除します。

2. Underscore ハック

特定

.selector {
  _property: value;
  _margin: 10px;
  _display: block;
}

問題点

IE6 はプロパティ名の先頭のアンダースコアを無視しましたが、他のブラウザはそれらを無効として扱いました。これにより、同じルール内で IE6 を特にターゲットにすることができました。

例

/* 修正前: IE6 ハックが存在する */
.box {
  padding: 20px;
  _padding: 15px;
}

/* 修正後: アンダースコアで始まるプロパティを削除する */
.box {
  padding: 20px;
}

修正

_ で始まるプロパティをすべて削除します。

3. Double Margin Float Bug

特定

.selector {
  float: left;
  margin-left: 20px;
  display: inline; /* これはハックです */
}

問題点

IE6 では、float された要素のマージンが float と同じ方向にある場合、マージンが 2 倍になりました。display: inline を追加すると、これが修正されました (float された要素はすでにブロックレベルであるにもかかわらず)。

例

/* 修正前: IE6 ハックが存在する */
.sidebar {
  float: left;
  margin-left: 20px;
  display: inline;
}

/* 修正後: float された要素から display: inline を削除する */
.sidebar {
  float: left;
  margin-left: 20px;
}

修正

float が設定されている要素から display: inline を削除します。注: 要素が float されている場合にのみ削除してください。display: inline は他のコンテキストでは意図的なものである可能性があります。

4. PNG Transparency (AlphaImageLoader)

特定

.selector {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader();
  behavior: url(iepngfix.htc);
}
<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>DD_belatedPNG.fix('.png-fix');</script>
<![endif]-->

問題点

IE6 は PNG のアルファ透明度をネイティブにレンダリングできず、透明度の代わりに灰色の背景を表示していました。AlphaImageLoader フィルタは、独自の回避策でした。

例

/* 修正前: IE6 PNG ハックが存在する */
.logo {
  background: url(logo.png) no-repeat;
  _background: none;
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='logo.png',
    sizingMethod='crop'
  );
}

/* 修正後: filter とアンダースコアプロパティを削除する */
.logo {
  background: url(logo.png) no-repeat;
}

修正

すべての filter: progid:DXImageTransform ルール、behavior: url(*.htc) ルール、および関連する .htc ファイルまたは PNG-fix JavaScript ライブラリを削除します。

5. hasLayout / zoom:1

特定

.selector {
  zoom: 1;
}
.selector {
  *zoom: 1; /* Star ハックのバリアント */
}

問題点

IE6/7 には、要素のレンダリング方法に影響を与える "hasLayout" と呼ばれる内部概念がありました。多くのバグは、要素が "layout を持っていない" ことによって引き起こされました。zoom: 1 を設定すると、視覚的な副作用なしに hasLayout がトリガーされました。

例

/* 修正前: IE6 hasLayout ハックが存在する */
.container {
  background: #eee;
  zoom: 1;
}

/* 修正後: zoom: 1 を削除する */
.container {
  background: #eee;
}

修正

zoom: 1 宣言を削除します。zoom が 1 以外の値を持つ場合は、削除する前に意図を確認してください。削除後にテストしてください。zoom: 1 が無関係なレイアウトの問題を修正することがあったためです。

6. Peekaboo Bug (Holly Hack)

特定

.selector {
  height: 1%;
}
/* しばしば組み合わされる */
* html .selector {
  height: 1%;
}

問題点

IE6 には、float されたコンテナ内のコンテンツが、ユーザーがスクロールまたはウィンドウのサイズを変更するまでランダムに消えるバグがありました。height: 1% ("Holly ハック") を設定すると、hasLayout がトリガーされ、これが修正されました。

例

/* 修正前: Holly ハックが存在する */
.wrapper {
  background: #fff;
  height: 1%;
}

/* 修正後: IE6 専用の場合、height: 1% を削除する */
.wrapper {
  background: #fff;
}

修正

要素に特定の高さが必要ない場合は、height: 1% を削除します。削除する前に、高さが実際のレイアウトの目的で使用されていないことを確認してください。

7. Box Model Hack

特定

.selector {
  width: 250px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 200px;
}
html>body .selector {
  width: 200px;
}

問題点

IE5 および IE6 (quirks モード) は、width を誤って計算し、padding と border を width に含めていました。voice-family ハックは、CSS 解析のバグを利用して、異なるブラウザに異なる width を提供していました。

例

/* 修正前: Box model ハックが存在する */
.box {
  width: 250px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 200px;
}
html>body .box {
  width: 200px;
}

/* 修正後: ハックを削除し、意図した width を保持する */
.box {
  width: 200px;
}

修正

voice-family 宣言と重複する width/height プロパティを削除します。html>body セレクタのルールが、box model の値をリセットするためだけに存在する場合は、それらを削除します。標準に準拠した値を保持します。

8. Min-Height Hack

特定

.selector {
  min-height: 300px;
  height: auto !i
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

IE6 Compatibility Patterns Reference

Technical reference for identifying and removing Internet Explorer 6 CSS and JavaScript compatibility patterns from legacy codebases.

When to Use This Skill

  • Identifying IE6-specific code that can be safely removed
  • Explaining unusual CSS patterns in legacy codebases
  • Auditing stylesheets for deprecated browser workarounds
  • Modernizing legacy codebases

Removal Guidelines

All IE6 patterns documented here can be safely removed from modern codebases. IE6 usage is effectively zero. After removal, test to ensure no accidental side effects (some hacks like zoom: 1 occasionally fixed unrelated issues).

1. Star-HTML Hack

Identify

* html .selector { }
* html #id { }
* html body .class { }

Problem

IE6 incorrectly treated <html> as if it had a parent element in the DOM, allowing * html to match. Standards-compliant browsers correctly ignore this selector since html is the root element.

Example

/* Before: IE6 hack present */
.sidebar {
  margin-left: 200px;
}
* html .sidebar {
  margin-left: 180px;
}

/* After: Remove the * html rule entirely */
.sidebar {
  margin-left: 200px;
}

Fix

Delete any rule starting with * html.

2. Underscore Hack

Identify

.selector {
  _property: value;
  _margin: 10px;
  _display: block;
}

Problem

IE6 ignored leading underscores in property names while other browsers treated them as invalid. This allowed targeting IE6 specifically within the same rule.

Example

/* Before: IE6 hack present */
.box {
  padding: 20px;
  _padding: 15px;
}

/* After: Remove underscore-prefixed properties */
.box {
  padding: 20px;
}

Fix

Delete any property starting with _.

3. Double Margin Float Bug

Identify

.selector {
  float: left;
  margin-left: 20px;
  display: inline; /* This is the hack */
}

Problem

IE6 doubled margins on floated elements when the margin was in the same direction as the float. Adding display: inline fixed this (despite floated elements already being block-level).

Example

/* Before: IE6 hack present */
.sidebar {
  float: left;
  margin-left: 20px;
  display: inline;
}

/* After: Remove display: inline from floated elements */
.sidebar {
  float: left;
  margin-left: 20px;
}

Fix

Remove display: inline from elements that have float set. Note: Only remove if the element is floated; display: inline may be intentional in other contexts.

4. PNG Transparency (AlphaImageLoader)

Identify

.selector {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader();
  behavior: url(iepngfix.htc);
}
<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>DD_belatedPNG.fix('.png-fix');</script>
<![endif]-->

Problem

IE6 couldn't render PNG alpha transparency natively, displaying a grey background instead of transparency. The AlphaImageLoader filter was a proprietary workaround.

Example

/* Before: IE6 PNG hack present */
.logo {
  background: url(logo.png) no-repeat;
  _background: none;
  _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='logo.png',
    sizingMethod='crop'
  );
}

/* After: Remove filter and underscore properties */
.logo {
  background: url(logo.png) no-repeat;
}

Fix

Remove all filter: progid:DXImageTransform rules, behavior: url(*.htc) rules, and any associated .htc files or PNG-fix JavaScript libraries.

5. hasLayout / zoom:1

Identify

.selector {
  zoom: 1;
}
.selector {
  *zoom: 1; /* Star hack variant */
}

Problem

IE6/7 had an internal concept called "hasLayout" that affected how elements rendered. Many bugs were caused by elements not "having layout." Setting zoom: 1 triggered hasLayout without visual side effects.

Example

/* Before: IE6 hasLayout hack present */
.container {
  background: #eee;
  zoom: 1;
}

/* After: Remove zoom: 1 */
.container {
  background: #eee;
}

Fix

Remove zoom: 1 declarations. If zoom has any value other than 1, verify intent before removing. Test after removal as zoom: 1 occasionally fixed unrelated layout issues.

6. Peekaboo Bug (Holly Hack)

Identify

.selector {
  height: 1%;
}
/* Often combined with */
* html .selector {
  height: 1%;
}

Problem

IE6 had a bug where content inside floated containers would randomly disappear until the user scrolled or resized the window. Setting height: 1% (the "Holly hack") triggered hasLayout and fixed this.

Example

/* Before: Holly hack present */
.wrapper {
  background: #fff;
  height: 1%;
}

/* After: Remove height: 1% if it was only for IE6 */
.wrapper {
  background: #fff;
}

Fix

Remove height: 1% if the element doesn't need a specific height. Verify the height isn't being used for actual layout purposes before removing.

7. Box Model Hack

Identify

.selector {
  width: 250px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 200px;
}
html>body .selector {
  width: 200px;
}

Problem

IE5 and IE6 in quirks mode calculated width incorrectly, including padding and border inside the width. The voice-family hack exploited a CSS parsing bug to serve different widths to different browsers.

Example

/* Before: Box model hack present */
.box {
  width: 250px;
  voice-family: "\"}\"";
  voice-family: inherit;
  width: 200px;
}
html>body .box {
  width: 200px;
}

/* After: Remove the hack, keep intended width */
.box {
  width: 200px;
}

Fix

Remove voice-family declarations and duplicate width/height properties. Remove html>body selector rules if they only exist to reset box model values. Keep the standards-compliant value.

8. Min-Height Hack

Identify

.selector {
  min-height: 300px;
  height: auto !important;
  height: 300px;
}
/* Or */
.selector {
  min-height: 300px;
  _height: 300px;
}

Problem

IE6 didn't support min-height but incorrectly treated height as a minimum height (allowing content to expand the element). This hack exploited that behavior.

Example

/* Before: min-height hack present */
.panel {
  min-height: 300px;
  height: auto !important;
  height: 300px;
}

/* After: Keep only min-height */
.panel {
  min-height: 300px;
}

Fix

Remove duplicate height declarations and !important overrides that exist only for IE6 compatibility. Keep the min-height value.

9. CSS Expressions

Identify

.selector {
  width: expression(document.body.clientWidth > 800 ? "800px" : "auto");
  height: expression(this.scrollHeight > 300 ? "300px" : "auto");
  background-color: expression((new Date()).getHours() > 12 ? "#fff" : "#000");
}

Problem

IE6 didn't support min-width, max-width, min-height, or max-height. CSS expressions allowed embedding JavaScript directly in CSS to calculate values dynamically. These were performance-intensive as they re-evaluated constantly.

Example

/* Before: CSS expression present */
.content {
  max-width: 800px;
  min-width: 400px;
  width: expression(
    document.body.clientWidth < 401 ? "400px" :
    document.body.clientWidth > 801 ? "800px" : "auto"
  );
}

/* After: Remove expression, keep standard properties */
.content {
  max-width: 800px;
  min-width: 400px;
}

Fix

Remove all expression() values. The standard CSS properties (min-width, max-width, etc.) will work in all modern browsers.

10. Conditional Comments

Identify

<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" />
<![endif]-->

<!--[if lt IE 7]>
<script src="ie6-fixes.js"></script>
<![endif]-->

<!--[if lte IE 6]>
<style>.selector { margin: 10px; }</style>
<![endif]-->

Problem

Microsoft's official method for targeting specific IE versions. While cleaner than CSS hacks, these still load unnecessary resources for a browser that no longer exists.

Operators

  • IE 6 - exactly IE6
  • lt IE 7 - less than IE7 (IE6 and below)
  • lte IE 7 - less than or equal to IE7
  • gt IE 6 - greater than IE6
  • gte IE 6 - greater than or equal to IE6

Example

<!-- Before: Conditional comments present -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="main.css" />
  <!--[if IE 6]>
  <link rel="stylesheet" href="ie6.css" />
  <![endif]-->
  <!--[if lt IE 9]>
  <script src="html5shiv.js"></script>
  <![endif]-->
</head>

<!-- After: Remove IE6-specific conditionals -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="main.css" />
  <!--[if lt IE 9]>
  <script src="html5shiv.js"></script>
  <![endif]-->
</head>

Fix

Remove conditional comments targeting IE6 specifically ([if IE 6], [if lt IE 7], [if lte IE 6]). Also delete the referenced files (ie6.css, etc.). Conditionals targeting IE7+ may still be needed in some enterprise environments—verify before removing.

Quick Reference: Patterns to Search For

* html
_margin
_padding
_display
_width
_height
_filter
zoom: 1
*zoom
height: 1%
voice-family
expression(
progid:DXImageTransform
AlphaImageLoader
behavior: url(
.htc
<!--[if IE 6]>
<!--[if lt IE 7]>
<!--[if lte IE 6]>
DD_belatedPNG
iepngfix