1
我在我的網站上使用bitrepository的Ajax PHP表單,並使用它們的CSS樣式表對它進行樣式設置。請前往http://diginnovations.com/dig-v4查看網站。Textarea框在Firefox 3.6中無法正確顯示
除了Firefox 3.6以外,所有瀏覽器(甚至IE8)中的所有內容都能正確顯示。 「評論」一詞在textarea之外顯示,這也是錯誤的地方。我用「位置:相對;」爲了移動textarea並提交按鈕。
這裏是PHP代碼:
$acf_form_fields = array('sender_name' => array('name' => 'Name',
'mandatory' => 1,
'validation' => array('basic' => 1),
'type' => 'input',
'errors' => array('none' => 'Fill your name')),
'sender_email' => array('name' => 'Email',
'mandatory' => 1,
'validation' => array('basic' => 1, 'email' => 1),
'type' => 'input',
'errors' => array('none' => 'Fill an e-mail address',
'invalid' => 'Fill a valid e-mail address')),
'sender_telephone' => array('name' => 'Phone Number',
'mandatory' => 0,
'type' => 'input'),
'sender_message' => array('name' => '<div class="textbox">Comment</div>',
'mandatory' => 1,
'validation' => array('basic' => 1, 'min_chars' => 15),
'type' => 'textarea',
'attributes' => array('rows' => 5,
'cols' => 35),
'errors' => array('none' => '<div class="textboxerror">Fill your message</div>',
'min_chars' => 'Your message should have at least [min_chars] characters.')));
這裏是CSS:
/* Label, Input, Textarea */
#ajax_contact_form div.wrap { position: relative; margin: 0;}
#acf_fields div.wrap label.in_field { position: absolute; top: 0; left: 0; width: 160px; display: block; margin: 11px 5px 5px 6px; padding: 0; color: #777; }
#ajax_contact_form div br {display: none;}
#acf_fields div { padding: 1px 0 1px 0px; }
#acf_fields div input { display: inline; font-size: 17px; }
#acf_fields div textarea { position: relative; left: 300px; bottom: 150px; font-size: 17px; display: inline; }
#acf_fields p.acf_escts { padding: 5px 0; }
#acf_fields label.acf_escts { width: 199px; padding-left: 0px; margin: 2px 17px 5px 0px; text-align: right; float: none; }
/* Input, Textarea, Select */
#acf_fields input, textarea, select { -moz-box-shadow: 0 0 3px #eeeeee; background:-moz-linear-gradient(top, #ffffff, #eeeeee 1px, #ffffff 5px); margin: 5px 5px 5px 0; padding: 2px; height: 30px; width: 269px; }
#acf_fields input, select { float: none; border: 2px solid #999; color: #333; -moz-border-radius: 3px; }
#acf_fields textarea { position: relative; left: 300px; bottom: 150px; width: 269px; height: 130px; border: 2px solid #999; color: #333; -moz-border-radius: 3px; }
.textbox { position: relative; left: 300px; bottom: 150px; display: inline; z-index: 150; }
.textboxerror { position: relative; left: 300px; bottom: 150px; display: inline; z-index: 150; }
顯然,如果我將它們移動到FF 3.6正確顯示,它攪亂了所有的定位其他瀏覽器。
有什麼建議嗎?提前致謝。
謝謝你的提示!該div是問題。 – 2011-05-12 19:27:58