|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14429
- 金币
- 2500
- 威望
- 1647
- 贡献
- 1448
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
7 l. p2 I, p" @( o: H" Z7 V关键在于：max-width:780px;以及下面那行。8 p/ |& d! `+ s3 q5 h2 a1 i
固定像素适应:+ r6 a @- V4 h' \4 l
2 @8 a4 L4 i6 F. kdotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0> 以下是引用片段：4 m- N( B/ D+ D; ]% o1 \
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
& w! G C7 `9 y7 F; ]<html xmlns="http://www.w3.org/1999/xhtml";> 8 i3 Y! g" V* U2 Q) } w
<head> # v4 ~ p4 ]" g8 X/ \1 j1 d
<meta http-equiv="Content-Type" c />
$ o# z, Q: J: y) A( ?, c2 P( z3 `* c<title>css2.0 VS ie</title>
^- C8 `7 [/ h% D8 m* T1 i0 F<style type="text/css">
8 @* j7 g) t8 w- D1 f7 l( d8 l<!--
" R9 i: s& q% o5 P" v8 F& L6 xbody {
6 F n3 A6 ]% ^4 Q6 B" z3 ?3 W V3 b( Yfont-size: 12px;
6 m4 r! q+ V( a2 j" Dtext-align: center;
/ {1 j! D; q' k+ Q# Wmargin: 0px;
6 W x% H9 B( ]$ v7 i' Xpadding: 0px; " }3 v' ^6 e! H, A( U
}
: E5 Z- a! D: i#pic{ 9 Q2 J) [" r' ]. V+ U4 p. [
margin:0 auto;
H5 W4 {' y5 D9 V7 ]' p/ N$ h width:800px; 6 Y$ B# j/ ~7 T4 g( V+ |7 R6 `
padding:0;
, |, A+ j. C- { border:1px solid #333; 0 H1 n. i7 g5 U. v6 d# E+ y
}
, r5 e- v9 R0 j( G8 S1 L9 P: V* |#pic img{ / } W. r! T, z
max-width:780px;
9 X: R" m; B c: l/ Y! G% }# j7 ]width:expression(document.body.clientWidth > 780? "780px": "auto" ); ' s3 T" t3 Z) e# E$ a* K
border:1px dashed #000;
7 i. l* g7 K1 h7 d) B! t% Z0 n j}
- T4 O. `' u$ S0 \" v- h; e-->
' A* g' Q! `; j7 h5 J1 `4 |</style>
" \! i6 ]5 n" L% ^2 t. g# D9 a</head>
$ X% ~2 ~* e/ m+ U6 I<body> + p, H: Q y0 T# Y# v
<div id="pic">
0 A- ~- }! F# ]! ]<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> * e, M# [; k; ^$ b& p0 d1 f% \
</div>
& T- O) o9 J: I# s- s" u/ `</body>
7 f7 Y* B. u% E' w$ i; x9 |</html>
( X1 X3 C- B3 m \/ ]* z) C7 z
% ^$ j) L3 E6 m7 I. u) D百分比适应:% g5 S/ Q3 v3 C, l Z a& o( v& W
以下是引用片段：
. s7 B; X& M [/ R. n1 [! R<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
6 {7 p- j$ L- Q9 q, i<html xmlns="http://www.w3.org/1999/xhtml";> ( u0 N4 X- D* Z8 i! Z
<head> 2 C! ?1 x% @% @! E
<meta http-equiv="Content-Type" c />
8 T* Y' Y/ N2 Z4 c4 u! C<title>css2.0 VS ie</title>
' ?) i# Z0 x/ [$ d4 Y<style type="text/css"> # P \% y9 o' u$ f; g! U4 a
<!--
" s u3 t4 Q* R' N5 jbody {
9 @/ `7 C' A, J1 bfont-size: 12px;
2 N0 m( [; w Z. `2 E5 E% G v9 }/ s! Ftext-align: center; 2 S" i1 Q/ f* h
margin: 0px; 1 m& O. u0 X. Y) W+ @; m
padding: 0px;
) k/ c# M5 G- f) J5 ]% @$ q9 _8 ?}
; s: m% o& {' | Q# P, ?: L0 d2 f#pic{
% G& i/ u4 k+ O/ l, _( P margin:0 auto;
! I" D' m8 M) S, F' T) g width:800px;
1 e9 D+ |' U7 y6 W padding:0;
# [ y( _1 a R border:1px solid #333; U% z4 b1 N) O1 n( O& C
}
* Q& a0 ?0 X/ P0 v#pic img{ , B: F: u1 c+ R: i
max-width:780px; / J9 |7 x, @: z! k- ]7 g
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
7 `1 A7 f# Z* e: C# rborder:1px dashed #000;
& g& A; O( z0 i9 K" h% t' A} ! W5 W8 p4 B- ~; v
-->
! ` h& T0 V2 u( e</style> : ^4 j$ w$ |% ~
</head> & {1 x, @1 |9 w% X, E! B
<body> $ k' O$ A8 q' V9 m
<div id="pic"> ) z# b$ j7 {0 D x0 W
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> & D4 a Q+ `6 X$ u! s& K
</div> 4 ~4 t3 z2 a% ?' {/ ^* |, Z
</body> ' i4 y" _3 c" T f; h1 r: p0 z
</html> |
|
发表于 2007-12-8 14:55
| 