Sự cố với <loại đầu vào = 'văn bản' /> và <textarea> chiều rộng

Trong mã sau, cả phần tử INPUT và TEXTAREA đều hiển thị rộng hơn so với chúng. Làm thế nào tôi có thể giới hạn chúng đến 100% diện tích có thể sử dụng trong div?Sự cố với <loại đầu vào = 'văn bản' /> và <textarea> chiều rộng

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <style> 
     .mywidth{ width:100%; } 
    </style> 
</head> 
<body> 
    <div style="border: 3px solid green; width: 100px;"> 
     <input class="mywidth" ><br /> 
     <textarea class="mywidth"></textarea><br /> 
     <div style="background-color: yellow;" class="mywidth">test</div> 
    </div> 
</body> 
</html>

Lưu ý: Nếu tôi loại bỏ các DOCTYPE, nó ám như mong đợi, với INPUT, TEXTAREA và DIV bên trong tất cả chiều rộng giống nhau và không đi ra ngoài DIV chứa.

Cập nhật: Không chịu được đường viền mặc định trên các thành phần đó, nó vẫn xuất hiện để hiển thị không chính xác trong IE7.

Nguồn

2008-11-03 Larsenal

Đầu vào và textareas cả hai đều có đường biên giới theo mặc định

<style> 
    .mywidth{ 
    width:100%; 
    border:0; 
    } 
</style>

sẽ làm cho tất cả các yếu tố trong container của bạn.

Cập nhật

IE cũng đã để lại và đệm chuột phải vào từng yếu tố và css sau phù hợp với tất cả các yếu tố bên trong container trong FF3, FF2, Safari 3, IE6 và IE7.

<style> 
    .mywidth{ width:100%; border:0; padding-left:0; padding-right:0; } 
</style>

Tuy nhiên, đừng quên rằng bạn có thể sẽ cần một đường viền và có thể là phần đệm để làm cho các trường này xuất hiện cho người dùng như bình thường. Nếu bạn tự đặt đường viền và vùng đệm đó thì bạn sẽ biết sự khác nhau là gì, trên các trình duyệt, giữa chiều rộng của vùng chứa và chiều rộng mà bạn sẽ cần phải cung cấp cho các phần tử đầu vào/văn bản.

Nguồn

2008-11-03 18:19:15 philnash

Bạn đã thử chưa? Kiểm tra IE7. Nó vẫn cắn vào đường viền màu xanh lá cây trên div chứa. – Larsenal

Xin lỗi, tôi đang sử dụng máy Mac! Tôi sẽ xem những gì tôi có thể làm trong IE7. – philnash

Bạn có thể thử sử dụng DOCTYPE này thay vì

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Nguồn

2008-11-03 18:17:48

Không xuất hiện để sửa chữa nó. – Larsenal

Không có DOCTYPE sẽ buộc trình duyệt chuyển sang chế độ quirks, sử dụng mô hình hộp cũ, không chính xác, không khớp với đường viền như một phần của chiều rộng. – philnash

Hoặc ... '': P –

Thêm "padding-right: 3px;" đến div để nó đọc là:

<div style="border: 3px solid green;padding-right:3px; width: 100px;">

Vì bạn đã thêm đường viền vào div cũng được tính là không gian bên trong của div.

Lý do nó hoạt động mà không cần khai báo doc là trình duyệt không làm cho các trang như là XHTML chuyển tiếp nhưng đồng bằng html cũ trong đó có một phương pháp vẽ khác nhau cho nhân div, vv

Nguồn

2008-11-03 18:23:08

@Phil có câu trả lời ở trên.

Ngẫu nhiên, việc sử dụng Firebug thực sự hiển thị đường viền mặc định trên phần tử văn bản và phần tử nhập. Vì vậy, sử dụng Firebug có thể đã giúp.

Nguồn

2008-11-03 18:23:40

Nó trông tốt trong FF, nhưng nó vẫn hiển thị không chính xác trong IE7. – Larsenal

xhtml mã nghiêm ngặt dường như làm điều đó với biểu mẫu. tôi chỉ làm cho các đầu vào và textareas kéo dài ở 99% và có vẻ như làm việc. hãy thử.

Nguồn

2009-07-18 15:03:20

Tôi cũng gặp vấn đề tương tự. Tôi đã sử dụng tài sản hộp-sizing đề cập ở đây:

How can I make a TextArea 100% width without overflowing when padding is present in CSS?

Đây là những gì nó trông giống như đối với tôi:

<style> 
    .mywidth{ 
    width:100%; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    } 
</style>

Nguồn

2010-07-22 13:24:40 bmaupin

Điều này nên được chọn làm câu trả lời đúng, cảm ơn! –

Điều này sẽ không hoạt động trong IE7 trở xuống, vì các trình duyệt cũ hơn không hỗ trợ kích thước hộp. Ngoài ra, bạn nên chắc chắn bao gồm '-ms-box-sizing' và luôn liệt kê thuộc tính CSS3 thực tế (' box-sizing') cuối cùng, vì vậy khi trình duyệt triển khai thuộc tính CSS thực, nó sẽ ghi đè phiên bản dành riêng cho nhà cung cấp của họ. – RussellUresti

@RussellUresti: cuộc gọi tốt, tôi đã cập nhật câu trả lời của tôi dựa trên nhận xét của bạn – bmaupin

Sự cố với <loại đầu vào = 'văn bản' /> và <textarea> chiều rộng

Trả lời

Các vấn đề liên quan