|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14341
- 金币
- 2456
- 威望
- 1647
- 贡献
- 1404
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。3 a( z, h+ M, e/ _( L
关键在于：max-width:780px;以及下面那行。1 x* D% d+ C; V
固定像素适应:# _. ~9 q! I; R. @3 W9 t/ q
" v# ~/ I1 e. j, {6 D: O/ g% J
dotted; 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> 以下是引用片段：
/ o* ~1 W# P( |<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
; T' V- w/ h4 T! f3 }, B; P9 h, j: p7 d<html xmlns="http://www.w3.org/1999/xhtml";>
) W7 J: O) f6 N s9 l- I<head> m1 a0 s5 d, M' |- a' O1 {& e, e
<meta http-equiv="Content-Type" c /> 8 ^* }* h% ~% B- x d) f% V+ |
<title>css2.0 VS ie</title> 8 e1 i$ L4 @: o# q
<style type="text/css">
+ H8 J8 P/ v3 [$ e$ E<!--
% u; F$ Y" h4 h; D. I1 t, T: }body { " i! v6 U/ a& a+ l
font-size: 12px;
# f( ~8 c6 I+ H8 z5 w9 gtext-align: center;
9 W) S0 F" v4 \' t( vmargin: 0px;
" [: U5 O( m1 {6 D& L4 B j2 K7 ~. ?: a# Ppadding: 0px;
3 C/ r0 [! Y2 x( S2 W2 |0 @} ; f- ^" w( p. @2 Y
#pic{
( Y% D4 r$ [" ]0 \% q3 v margin:0 auto;
+ b4 m4 U, S+ y' q, v. [" e* Z width:800px; ; i% ?# S# A% [" f( }& Q
padding:0;
# v e3 n% t3 f* Q$ F/ e& { border:1px solid #333; : v0 @- a7 E# g+ `, s
}
( H. Y' G& M1 k! B' [#pic img{ % d, _* d% l( F2 Q& T2 f; P: b
max-width:780px;
* F9 |# \+ |& B! ^4 [% Iwidth:expression(document.body.clientWidth > 780? "780px": "auto" ); " @. A x1 P3 S! [
border:1px dashed #000; - z3 [; H3 r- l. y
} : ? m/ `+ d/ f# V* ^ P/ G- N
--> " s4 e' ~* f, Z
</style> . R+ I% b8 x( E4 f$ P. K' l( J
</head>
4 M0 V% r1 z. D; v( k<body> q, U8 a# S( ^' y
<div id="pic"> ( L7 Z @$ C% @* g" H& p+ u
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
) o+ }) @( |. Q</div>
3 O+ C& Z/ u e3 U2 ~</body> * R/ a2 e( a9 _2 V, Y$ g4 y* ?- l
</html> / Z: y$ a3 @7 P& i
4 ?; L: j% J0 v, y4 D6 ^百分比适应:' p& k; n5 [) w E O
以下是引用片段：, d9 l5 a4 b, _% H1 V) [: V
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
$ W7 p+ P; X( w) I<html xmlns="http://www.w3.org/1999/xhtml";> 0 J2 F. S0 a/ l3 Q7 Z U+ q
<head> # Q( O# ]( i8 T+ v
<meta http-equiv="Content-Type" c />
' q7 c6 r, b U ~<title>css2.0 VS ie</title> 7 c3 R$ a7 R( [* O! Y, |6 \% |( V
<style type="text/css"> 9 V3 t0 H/ _# O$ E
<!-- $ U6 d9 q- |4 B6 D: K' @- N
body { ; v1 V, _% m$ P- b5 ?, A/ k
font-size: 12px; % G1 T" d3 o0 I% ]7 c; V
text-align: center;
$ o6 ] }7 D; u7 E. d Tmargin: 0px;
3 V- S' ^, {9 j! i8 X. H% t+ m* e, qpadding: 0px;
9 `. {- T7 U. h. Y! S% e2 p} & a2 V* Z$ X7 E9 O" G
#pic{ + c, J O8 c4 J2 E1 j0 f$ q
margin:0 auto;
3 f8 n. k I& l( r width:800px; ( L9 D8 ?# `/ I2 S8 t" N
padding:0;
$ |+ F0 @. f5 ` border:1px solid #333;
2 c0 G% k8 _) o9 f9 G) } } 3 v# t' J4 T4 @ @) d
#pic img{ 9 B' ~8 S R( i6 j
max-width:780px;
9 K- H+ j! {# n- y( S" E' M5 Xwidth:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
- a- S7 M; ]+ P; e# [border:1px dashed #000;
: b3 Q0 n5 Q0 f} W# n) I+ e# K8 A
--> , O3 s9 o7 h8 _/ ^7 p
</style> 3 g6 T, m! P8 w
</head> . i+ F4 O0 K j* w' F
<body>
# k; B& g) y" |: [- |<div id="pic">
5 I6 E& u( q4 o9 D8 E<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
) g3 M# ~! ?9 a</div>
1 F. m- z& h% ^1 R3 U- p</body> 3 w7 M; [% P* `0 o" }
</html> |
|
发表于 2007-12-8 14:55
| 