|
 
- UID
- 1
- 帖子
- 738
- 精华
- 28
- 积分
- 14443
- 金币
- 2507
- 威望
- 1647
- 贡献
- 1455
|
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。, i- ?; a7 v4 ^3 g3 M9 g( m; H
关键在于：max-width:780px;以及下面那行。
, m9 q# N2 w; d& v固定像素适应:
, R' ^! e! y0 k8 }3 N% a( q( F* h! {# ~" _/ g9 u' U" K
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> 以下是引用片段：3 h) v6 C1 M, Q* X
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
: e6 G+ ` l5 ~% v' y9 W q<html xmlns="http://www.w3.org/1999/xhtml";>
9 W3 e4 [ r* p6 _6 \( e$ J" i' Y<head>
* A6 t6 k& y5 o* f; |<meta http-equiv="Content-Type" c /> * O D7 q& |: [; }, [8 k
<title>css2.0 VS ie</title>
7 Z7 O% Q# u# P3 h- ]$ b<style type="text/css">
+ I7 P/ r- d2 z, C<!--
( d# j! W! [+ T5 Y0 Gbody {
B0 h: _! e6 E- ofont-size: 12px; 6 W! t& J* @- a% u/ u
text-align: center; ) O5 p( G& u4 ^# C6 d
margin: 0px; ; z) z* Q1 E, V; {
padding: 0px; ( s" J E; N1 r9 S/ Y5 O. i* F
} , r& Y. _6 W$ q( c) R
#pic{ $ J4 G4 ^* K, b( ] a. z4 [
margin:0 auto;
) {* Z8 A3 v. G; x1 Q# ? width:800px;
* w5 V/ Z6 x2 T0 y$ f o0 N padding:0;
5 _7 n; o$ t, a: e border:1px solid #333;
+ S& w! N0 ~4 g } / p1 m& N) h: M' o7 Z: q! ^
#pic img{ / h* G# _, `5 F
max-width:780px; 5 H- C: L! M" ?* b I) X3 P
width:expression(document.body.clientWidth > 780? "780px": "auto" ); # ~2 H# t4 q; Q) y
border:1px dashed #000;
: a; F4 P6 N6 o# E+ Y3 c5 g} ) U3 D- e" k# J
-->
& O% I; X: \1 J* t</style> - @$ M$ ^+ [$ W- z8 V; |
</head> 1 Y3 r, ]& Z! n8 M9 _) E
<body> 1 D2 N$ k8 w! }0 x: B! i
<div id="pic"> . l% ?3 B9 i8 Z P5 @# N3 B
<img src=http://webclub.net.cn/images/Beijing2008/logo.gif> 5 x' X T/ d( v/ ]; L8 A
</div>
/ c. z# ~9 W) _1 A</body> / R" Y3 D+ N' t# a' Z4 K/ p6 I
</html> * F' I3 T: B8 X! K
2 X7 Y# \$ c z百分比适应:- [# g& {- N/ y, M }+ t
以下是引用片段：" l+ \9 Y, ]& y6 y8 A* |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 5 a8 H- a# a$ F( p
<html xmlns="http://www.w3.org/1999/xhtml";>
& j; K2 x/ l) m! M6 {/ o, O9 w<head>
; i5 D$ [% Z; f<meta http-equiv="Content-Type" c />
% l/ D# [1 N; j" d1 L7 m) X a& ?<title>css2.0 VS ie</title>
! G# x. ^, U! w! R" d/ A' G<style type="text/css"> $ M1 `+ M+ C# d9 e
<!--
) m- ]% C z/ gbody { , g) H$ j, N& ] n1 f7 n- H* y
font-size: 12px; - {% p$ `' r. }+ m. c) [
text-align: center;
: Z5 { B' ~* l* f# Y# ~6 C6 wmargin: 0px;
' W& ~$ v( A& e, ?1 Mpadding: 0px;
# O( A0 C8 a3 e" F8 r}
1 S8 C# w7 N6 n% n- p$ o#pic{ 4 T/ K0 ^5 Q5 z" N2 v
margin:0 auto; 4 T+ o# h; H; n7 \
width:800px; ) I! m' P* `, T
padding:0;
# s( ]# m( s6 l8 j9 o* ^$ R border:1px solid #333;
: E& `) a$ u: @6 h+ ^5 P0 x } " R; e0 p: f4 Z! S. j! x
#pic img{
u: i3 Z) k7 z0 P$ n$ R1 E max-width:780px; 4 L7 X3 C+ X+ _! _2 s) k7 ^
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
2 N* {: R- x3 s" ]: z2 o1 cborder:1px dashed #000;
7 y/ O7 T, k9 ^/ v& s} ! y! [+ J4 F$ ~! r2 w ]
--> 7 X# h8 Q" Z) w; n
</style>
I% B& o9 c7 l# `</head>
3 ?7 `0 Z* C1 I# U<body>
1 [6 T! s: c( t. r<div id="pic">
# C* L$ ]1 m# ^" Y. z<img src=http://webclub.net.cn/images/Beijing2008/logo.gif>
/ Z9 [0 O+ l8 ^7 \7 y6 b* v6 y3 C</div> & R9 B2 F" `/ v3 ]% [
</body> / @4 Q! M& W) \2 K/ d( `3 v
</html> |
|
发表于 2007-12-8 14:55
| 