リスト要素にlist-styleと背景色を指定する際の問題点

云わば、先日投稿したスタイル初期化したリスト要素にlist-styleを指定するときの注意から派生した問題です。

スタイル初期化したリスト要素にlist-styleを指定するときの注意の簡単なおさらい

1. スタイル初期化したulにただlist-styleを指定しても行頭記号（・とか、1とか、■とか）が出ない
2. 方法その1「list-style-positionをinsideに指定する」
   問題点：リストが2行以上になったときに先頭がそろわない。
3. 方法その2「margin-leftを指定する」
   個人的おすすめの方法。

リスト要素にlist-styleと背景色を指定する際、行頭記号が背景色部分に含まれない

実現したいデザイン

結果

なみに上のCSSは、

ul {
	margin-left: 25px;
	list-style: disc;
}
ul li {
	background: #ccc;
	padding: 5px;
	margin-bottom: 5px;
}

となっております。
まあ、左にマージンしてますから当然っちゃあ当然なんですが…。

解決策として第一に考えたのが、background-colorをulに指定して、liにborder-bottomで区切り線を入れたらどうか、です。

ul {
	background: #ccc;
	list-style: disc;
}
ul li {
	margin-left: 25px;
	padding: 5px;
	border-bottom: 5px solid #fff;
}

結果

アウト。

第二の解決策。
リスト行頭記号（・とか、1とか、■とか）を画像にしたらどうか、です。

ul {
}
ul li {
	padding: 5px 5px 5px 25px;
	margin-bottom: 5px;
	background: #ccc url(img/list.gif) no-repeat 12px 10px;
}

成功！

ちなみに、

ul {
	background: #ccc;
}
ul li {
	padding: 5px 5px 5px 25px;
	background: url(img/list.gif) no-repeat 12px 10px;
	border-bottom: 5px solid #fff;
}

これでも同様な結果です。

しかし、画像にするというのは、list-style使わないっていうことですから、結局問題解決してないんですよね。

なにかうまい方法はないもんでしょうかねぇ。
例えば、これが絶対2行にならないというのならlist-style-positionをinsideにすることで解決なんですが…。