2 つの div を隣り合わせに並べようとしています。firefox と chrome の CSS をハックすることができましたが、Internet Explorer に問題がありました。私はここを見てきましたが、グーグルはいくつかを見つけましたが、まだ問題があります.
ウェブサイトはこちら
http://colmandesigns.123abc.co.nz/dev/brittens/index.html
ここに私のCSSがあります
どんな助けでも素晴らしいでしょう
ありがとう
2991 次
1 に答える
0
あなたの問題は、要素の配置方法に関連しています。この構造を使用して要素を整列するには、アンカーをイメージ (「staffimages」内) で区切る すべての<br>タグを削除し、CSS マージンを使用する必要があります。
<div class="staffimages">
<a href="#">
<img src="images/staff.jpg" width="50" height="50" alt="Johnny" border="0">
</a>
<br> -- これを削除
<br> -- これも削除 (など)
また、問題を解決する方法が他にない場合を除き、ブラウザー固有の CSS ハックを使用しないことをお勧めします。
以下に、HTML ファイルで使用する CSS スニペットを示します。
@charset "utf-8";
/* CSS ドキュメント */
本体 {マージン: 0 自動;}
.container {マージン:0 自動; 幅:1000px; 高さ:950px; background-image:url(images/container.png);}
＃引き返す {
位置: 絶対;
左: 0px;
上: 16px;
幅:700px;
右:700px;
高さ: 126px;
z-index: -1;
背景画像:url(images/bgbg.png);
}
/* ヘッダー */
.header {幅:982px; 高さ:370px; margin-left:9px; 背景画像:url(images/header.jpg);}
.navibg {background-image:url(images/navibg.png); 幅: 983px; 高さ:56px;}
.logo {margin-top:-40px;}
/* コンテンツのタイトル */
#ようこそ {幅:89px; 高さ:22px; padding-left:50px; パディングトップ:30px; フロート:左;}
#サービス{幅:89px; 高さ:22px; マージン左:-90px; パディングトップ:250px; フロート:左;}
#contactus {幅:89px; 高さ:22px; padding-left:50px; パディングトップ:30px; フロート:左;}
#makelifeeasy {幅:89px; 高さ:22px; padding-left:30px; パディングトップ:30px; フロート:左;}
.seperator {幅:300px; フロート:右; パディングトップ:30px; パディング右:90px;}
#チーム { 位置: 相対; マージントップ: 30px; 高さ: 19px; 幅: 78px; フロート: 右; マージン右: -105px; }
/* ナビゲーション */
.navi {フロート:右; パディング右:50px; パディングトップ:3px;}
/* コンテンツ */
.welcomecolumn {幅:500px; 高さ:自動; フロート:左; パディング左：6px; パディングトップ:5px; font-family:Verdana、Arial、Helvetica、sans-serif; フォントサイズ:11px; テキスト整列:両端揃え; 色:#505050; 行の高さ:150%;}
.servicescolumn {幅:500px; 高さ:自動; フロート:左; パディング左：6px; パディングトップ:5px; font-family:Verdana、Arial、Helvetica、sans-serif; フォントサイズ:11px; テキスト整列:両端揃え; 色:#505050; 行の高さ:150%;}
.list1 {フロート:左; margin-left:-20px;}
.list2 {フロート:右; padding-right:200px;}
/* フッター */
.footer {background-image:url(images/footer.png); 幅:982px; 高さ:65px; margin-left:9px; マージントップ:460px; 色:#505050}
.footernavi {font-size:9px; font-family:Verdana、Arial、Helvetica、sans-serif; フロート:右; パディング右:60px; パディングトップ:27px;}
.footernavidetails {font-size:10px; font-family:Verdana、Arial、Helvetica、sans-serif; フロート:左; パディング左: 308px; パディングトップ:27px; 色:#FFFFFF; }
.footertext {padding-left:40px; フォントサイズ:10px; font-family:Verdana、Arial、Helvetica、sans-serif; パディングトップ:110px; padding-bottom:5px; 色:#aeaeae; text-align:center}
/* チーム */
.staffimages {
高さ:自動;
フロート:左;
マージン左:12px;
マージントップ:15px;
}
.staffimages {
表示: インラインブロック;
margin-bottom: 20px;
}
.stafftext1、.stafftext2、.stafftext3、.stafftext4、.stafftext5 {
幅:150px;
フロート:左;
margin-left:80px;
色:#505050;
font-family:Verdana、Arial、Helvetica、sans-serif;
フォントサイズ:10px;
テキスト整列:両端揃え;
位置:絶対;
}
.stafftext1 {
上:30px;
}
.stafftext2 {
上:100px;
}
.stafftext3 {
上:170px;
}
.stafftext4 {
上:242px;
}
.stafftext5 {
上:311px;
}
/* 続きを読む */
#readmore, #readmore2, #readmore3, #readmore4, #readmore5 {
幅: 100px;
高さ: 自動;
フロート: 右;
位置: 絶対;
左マージン: 80px;
}
＃続きを読む {
上: 66px;
}
#続きを読む2 {
上: 135px;
}
#続きを読む3 {
上: 204px;
}
#続きを読む4 {
上: 275px;
}
#続きを読む5 {
上: 345px;
}
.contact詳細
{font-family:Verdana、Arial、Helvetica、sans-serif; フォントサイズ:12px; 幅:400px; パディング左：8px; 行の高さ:40%; 色:#626262}
.main {color:#626262}
/* グーグル */
。グーグル {
幅:300px;
高さ:305px;
フロート:左;
マージン左:8px;
マージントップ:12px;
margin-bottom:20px;}
/* リンク */
a.colman:link { color:#aeaeae; text-decoration:none} /* 未訪問のリンク */
a.colman:訪問 { color:#aeaeae; text-decoration:none} /* 訪問したリンク */
a.colman:hover {color:#0c3976; text-decoration:none} /* マウスオーバー リンク */
a.colman:active { color:#aeaeae; text-decoration:none} /* 選択されたリンク */
a.footerlinks:link { color:#FFFFFF;} /* 未訪問のリンク */
a.footerlinks:visited { color:#FFFFFF;} /* 訪問したリンク */
a.footerlinks:hover {color:#FFFFFF;} /* マウスオーバー リンク */
a.footerlines:active { color:#FFFFFF;} /* 選択されたリンク */
于 2012-08-06T09:38:01.273 に答える