2011-11-28 41 views
6

Tôi đang cố gắng che phủ văn bản trong một vùng văn bản có cùng văn bản trong div. Tôi đã quản lý để làm cho nó hoạt động trong tất cả các trình duyệt nhưng FireFox (Tôi đang sử dụng 8.0). Trong FireFox, văn bản bên trong vùng văn bản được dịch chuyển sang trái 1px.Văn bản vị trí bên trong vùng văn bản trong FireFox

Dưới đây là mã của tôi:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style> 
div, textarea 
{ 
    position:absolute; 
    top: 0px; 
    left: 0px; 
    margin: 0px; 
    padding: 0px; 
    font-family: Consolas; 
    font-size: medium; 
    border:none; 
    border-width: 0px; 
} 
div {color:red;} 
textarea {color: blue;} 
</style></head> 

<body> 
<textarea>Stuff</textarea> 
<div>Stuff</div> 

</body> 
</html> 
+0

Tôi muốn nói đó là cách Firefox hiển thị văn bản để bạn chỉ cần CSS đặc biệt cho Firefox. – Hossein

+0

Điều này dường như là một vấn đề trong một thời gian như http://stackoverflow.com/questions/4374537/how-to-force-firefox-to-render-textarea-padding-the-same-as-in-a-div chứng minh. Không có thực sự là một giải pháp tốt được liệt kê ở đó, một trong hai. – ScottS

+0

Có vẻ như tôi sẽ phải hoàn nguyên về trình duyệt khi đánh hơi. Giống như trong thời đại cũ tốt .. – ulu

Trả lời

1

Tôi nghĩ rằng tôi có thể yêu cầu giải pháp thanh lịch nhất cho việc này. Firefox không trừ một pixel từ vùng văn bản, nhưng một pixel là nửa pixel. Hãy xem này:

http://jsfiddle.net/e4YGW/19/

Tested trong các phiên bản mới nhất của trình duyệt Firefox, Chrome, Opera, và Safari.

+0

Nhìn tốt, nhưng nó có nghĩa là nó chỉ hoạt động trên dòng đầu tiên của văn bản? – ulu

+0

Vâng, nó sẽ chỉ hoạt động trên dòng đầu tiên. Nắm bắt tốt. Sửa lỗi đơn giản, chỉ cần sử dụng 'margin-left' thay vì' text-indent' và bạn sẽ tốt. Trường hợp kiểm tra: http://jsfiddle.net/e4YGW/19/ –

0

Tôi đề nghị đầu tiên bạn sử dụng một thiết lập lại của tất cả các thuộc tính nhà máy trình duyệt, sau đó áp dụng mã của bạn. Điều này sẽ làm giảm đáng kể cơ hội bạn có sự khác biệt về hiển thị trong các trình duyệt khác nhau.

Dưới đây là một liên kết của một trong những thiết lập lại nổi tiếng nhất:

http://meyerweb.com/eric/tools/css/reset/

Ngoài ra tôi đề nghị bạn quấn cả textarea của bạn và div của bạn trong một container trong đó có cùng kích thước chính xác và tương đối vị trí. Sau đó, áp dụng các thuộc tính tuyệt đối cho các phần tử bên trong.

+0

Xong tất cả những điều đó, không may mắn. Trên thực tế, thêm chiều cao dòng: 1 hư hỏng nó một chút. – ulu

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