Проблема с Dreamweaver CS5 в режиме реального времени и браузерами - PullRequest
Новая
       2

Проблема с Dreamweaver CS5 в режиме реального времени и браузерами

0 голосов
/ 11 августа 2011

Приветствие, у меня есть изображение, которое я нарезал с помощью Fireworks, а затем экспортировал в HTML.Я открыл HTML с Dreamweaver и сохранил файл в php, и он работает нормально.Я заменил несколько изображений тегами ввода HTML и кнопками HTML и установил их ширину и высоту с помощью css того же размера, что и исходное изображение, и поместил их в то же место точно в режиме живого просмотра в Dreamweaver, чтобы страница выглядела идеально, но когда мне ее малоFirefox или IE выглядят беспорядочно, а размеры полей ввода и кнопок выглядят более светлыми.Пожалуйста, посмотрите на мой код и посоветуйте мне, как решить проблему

Я собираюсь сравнить мой оригинальный и модифицированный.

Оригинальный код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>habib_contact_us.jpg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<!--Fireworks CS5 Dreamweaver CS5 target.  Created Fri Jul 29 11:34:37 GMT-0400 (Eastern Daylight Time) 2011-->
</head>
<body bgcolor="#ffffff">
<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="970">
<!-- fwtable fwsrc="habib_contact_us_working_file.png" fwpage="Page 1" fwbase="habib_contact_us.jpg" fwstyle="Dreamweaver" fwdocid = "842372334" fwnested="0" -->
  <tr>
   <td><img src="images/spacer.gif" width="61" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="208" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="189" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="43" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="44" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="29" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="45" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="42" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="15" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="221" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="73" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td colspan="11"><img name="habib_contact_us_r1_c1" src="images/habib_contact_us_r1_c1.jpg" width="970" height="52" border="0" id="habib_contact_us_r1_c1" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="52" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="7" colspan="3"><img name="habib_contact_us_r2_c1" src="images/habib_contact_us_r2_c1.jpg" width="458" height="261" border="0" id="habib_contact_us_r2_c1" alt="" /></td>
   <td colspan="5"><img name="habib_contact_us_r2_c4" src="images/habib_contact_us_r2_c4.jpg" width="203" height="26" border="0" id="habib_contact_us_r2_c4" alt="" /></td>
   <td rowspan="11"><img name="habib_contact_us_r2_c9" src="images/habib_contact_us_r2_c9.jpg" width="15" height="344" border="0" id="habib_contact_us_r2_c9" alt="" /></td>
   <td rowspan="8"><img name="habib_contact_us_r2_c10" src="images/habib_contact_us_r2_c10.jpg" width="221" height="278" border="0" id="habib_contact_us_r2_c10" alt="" /></td>
   <td rowspan="11"><img name="habib_contact_us_r2_c11" src="images/habib_contact_us_r2_c11.jpg" width="73" height="344" border="0" id="habib_contact_us_r2_c11" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="26" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="5"><img name="habib_contact_us_r3_c4" src="images/habib_contact_us_r3_c4.jpg" width="203" height="3" border="0" id="habib_contact_us_r3_c4" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="3" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="5"><img name="habib_contact_us_r4_c4" src="images/habib_contact_us_r4_c4.jpg" width="203" height="25" border="0" id="habib_contact_us_r4_c4" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="25" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="5"><img name="habib_contact_us_r5_c4" src="images/habib_contact_us_r5_c4.jpg" width="203" height="3" border="0" id="habib_contact_us_r5_c4" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="3" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="5"><img name="habib_contact_us_r6_c4" src="images/habib_contact_us_r6_c4.jpg" width="203" height="23" border="0" id="habib_contact_us_r6_c4" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="23" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="5"><img name="habib_contact_us_r7_c4" src="images/habib_contact_us_r7_c4.jpg" width="203" height="6" border="0" id="habib_contact_us_r7_c4" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="6" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="2" colspan="5"><img name="habib_contact_us_r8_c4" src="images/habib_contact_us_r8_c4.jpg" width="203" height="192" border="0" id="habib_contact_us_r8_c4" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="175" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="4"><img name="habib_contact_us_r9_c1" src="images/habib_contact_us_r9_c1.jpg" width="61" height="83" border="0" id="habib_contact_us_r9_c1" alt="" /></td>
   <td rowspan="2"><img name="habib_contact_us_r9_c2" src="images/habib_contact_us_r9_c2.jpg" width="208" height="23" border="0" id="habib_contact_us_r9_c2" alt="" /></td>
   <td rowspan="4"><img name="habib_contact_us_r9_c3" src="images/habib_contact_us_r9_c3.jpg" width="189" height="83" border="0" id="habib_contact_us_r9_c3" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="17" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="5"><img name="habib_contact_us_r10_c4" src="images/habib_contact_us_r10_c4.jpg" width="203" height="6" border="0" id="habib_contact_us_r10_c4" alt="" /></td>
   <td rowspan="3"><img name="habib_contact_us_r10_c10" src="images/habib_contact_us_r10_c10.jpg" width="221" height="66" border="0" id="habib_contact_us_r10_c10" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="6" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="2"><img name="habib_contact_us_r11_c2" src="images/habib_contact_us_r11_c2.jpg" width="208" height="60" border="0" id="habib_contact_us_r11_c2" alt="" /></td>
   <td rowspan="2"><img name="habib_contact_us_r11_c4" src="images/habib_contact_us_r11_c4.jpg" width="43" height="60" border="0" id="habib_contact_us_r11_c4" alt="" /></td>
   <td><img name="habib_contact_us_r11_c5" src="images/habib_contact_us_r11_c5.jpg" width="44" height="22" border="0" id="habib_contact_us_r11_c5" alt="" /></td>
   <td><img name="habib_contact_us_r11_c6" src="images/habib_contact_us_r11_c6.jpg" width="29" height="22" border="0" id="habib_contact_us_r11_c6" alt="" /></td>
   <td><img name="habib_contact_us_r11_c7" src="images/habib_contact_us_r11_c7.jpg" width="45" height="22" border="0" id="habib_contact_us_r11_c7" alt="" /></td>
   <td><img name="habib_contact_us_r11_c8" src="images/habib_contact_us_r11_c8.jpg" width="42" height="22" border="0" id="habib_contact_us_r11_c8" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="22" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="4"><img name="habib_contact_us_r12_c5" src="images/habib_contact_us_r12_c5.jpg" width="160" height="38" border="0" id="habib_contact_us_r12_c5" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="38" border="0" alt="" /></td>
  </tr>
</table>
</body>
</html>

Модифицированный код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Contact Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
td img {
display: block;
}

#txtEmail {
    height: 25px;
    width: 203px;
}

#txtName {
    height: 26px;
    width: 203px;
}

#txtSubject {

    height: 23px;
    width: 203px;

}

#txtMsg {
    height: 192px;
    width: 203px;
}

#btnSubmit {
    height: 22px;
    width: 44px;
}   

#btnClear {
    height: 22px;
    width: 45px;
}   



</style>
<!--Fireworks CS5 Dreamweaver CS5 target.  Created Fri Jul 29 11:34:37 GMT-0400 (Eastern Daylight Time) 2011-->
</head>

<body bgcolor="#ffffff">



<table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="970" id="table">
  <!-- fwtable fwsrc="habib_contact_us_working_file.png" fwpage="Page 1" fwbase="habib_contact_us.jpg" fwstyle="Dreamweaver" fwdocid = "842372334" fwnested="0" -->
  <tr>

<td><img src="images/spacer.gif" width="61" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="208" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="189" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="43" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="44" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="29" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="45" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="42" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="15" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="221" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="73" height="1" border="0" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>

  </tr>
  <tr>
    <td colspan="11"><img name="habib_contact_us_r1_c1" src="images/habib_contact_us_r1_c1.jpg" border="0" id="habib_contact_us_r1_c1" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="52" border="0" alt="" /></td>
  </tr>
  <tr>
    <td rowspan="7" colspan="3"><img name="habib_contact_us_r2_c1" src="images/habib_contact_us_r2_c1.jpg" width="458" height="261" border="0" id="habib_contact_us_r2_c1" alt="" /></td>
    <td colspan="5">


  <?php /*?><img name="habib_contact_us_r2_c4" src="images/habib_contact_us_r2_c4.jpg" width="203" height="26" border="0"               id="habib_contact_us_r2_c4" alt="" />
    <?php */?>

    <input type="text" name="txtName" id="txtName"  />

    </td>
    <td rowspan="11"><img name="habib_contact_us_r2_c9" src="images/habib_contact_us_r2_c9.jpg" width="15" height="344" border="0" id="habib_contact_us_r2_c9" alt="" /></td>
    <td rowspan="8"><img name="habib_contact_us_r2_c10" src="images/habib_contact_us_r2_c10.jpg" width="221" height="278" border="0" id="habib_contact_us_r2_c10" alt="" /></td>
    <td rowspan="11"><img name="habib_contact_us_r2_c11" src="images/habib_contact_us_r2_c11.jpg" width="73" height="344" border="0" id="habib_contact_us_r2_c11" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="26" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="5"><img name="habib_contact_us_r3_c4" src="images/habib_contact_us_r3_c4.jpg" width="203" height="3" border="0" id="habib_contact_us_r3_c4" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="3" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="5" >

  <?php /*?>  <img name="habib_contact_us_r4_c4" src="images/habib_contact_us_r4_c4.jpg" width="203" height="25" border="0" id="habib_contact_us_r4_c4" alt="" /><?php */?>


    <input type="text" name="txtEmail" id="txtEmail"  />




    </td>
    <td><img src="images/spacer.gif" width="1" height="25" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="5"><img name="habib_contact_us_r5_c4" src="images/habib_contact_us_r5_c4.jpg" width="203" height="3" border="0" id="habib_contact_us_r5_c4" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="3" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="5">
    <?php /*?><img name="habib_contact_us_r6_c4" src="images/habib_contact_us_r6_c4.jpg" width="203" height="23" border="0" id="habib_contact_us_r6_c4" alt="" /><?php */?>
    <input type="text" name="txtSubject" id="txtSubject"  />


    </td>
    <td><img src="images/spacer.gif" width="1" height="23" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="5"><img name="habib_contact_us_r7_c4" src="images/habib_contact_us_r7_c4.jpg" width="203" height="6" border="0" id="habib_contact_us_r7_c4" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="6" border="0" alt="" /></td>
  </tr>
  <tr>
    <td rowspan="2" colspan="5">
    <?php /*?><img name="habib_contact_us_r8_c4" src="images/habib_contact_us_r8_c4.jpg" width="203" height="192" border="0" id="habib_contact_us_r8_c4" alt="" /><?php */?>

     <textarea name="txtMsg" cols="" rows=""  id="txtMsg"></textarea>


    </td>
    <td><img src="images/spacer.gif" width="1" height="175" border="0" alt="" /></td>
  </tr>
  <tr>
    <td rowspan="4"><img name="habib_contact_us_r9_c1" src="images/habib_contact_us_r9_c1.jpg" width="61" height="83" border="0" id="habib_contact_us_r9_c1" alt="" /></td>
    <td rowspan="2"><img name="habib_contact_us_r9_c2" src="images/habib_contact_us_r9_c2.jpg" width="208" height="23" border="0" id="habib_contact_us_r9_c2" alt="" /></td>
    <td rowspan="4"><img name="habib_contact_us_r9_c3" src="images/habib_contact_us_r9_c3.jpg" width="189" height="83" border="0" id="habib_contact_us_r9_c3" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="17" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="5"><img name="habib_contact_us_r10_c4" src="images/habib_contact_us_r10_c4.jpg" width="203" height="6" border="0" id="habib_contact_us_r10_c4" alt="" /></td>
    <td rowspan="3"><img name="habib_contact_us_r10_c10" src="images/habib_contact_us_r10_c10.jpg" width="221" height="66" border="0" id="habib_contact_us_r10_c10" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="6" border="0" alt="" /></td>
  </tr>
  <tr>
    <td rowspan="2"><img name="habib_contact_us_r11_c2" src="images/habib_contact_us_r11_c2.jpg" width="208" height="60" border="0" id="habib_contact_us_r11_c2" alt="" /></td>
    <td rowspan="2"><img name="habib_contact_us_r11_c4" src="images/habib_contact_us_r11_c4.jpg" width="43" height="60" border="0" id="habib_contact_us_r11_c4" alt="" /></td>
    <td>

   <?php /*?> <img name="habib_contact_us_r11_c5" src="images/habib_contact_us_r11_c5.jpg" width="44" height="22" border="0" id="habib_contact_us_r11_c5" alt="" /><?php */?>
    <input name="btnSubmit" type="submit" value="Send" id="btnSubmit"/>

    </td>
    <td><img name="habib_contact_us_r11_c6" src="images/habib_contact_us_r11_c6.jpg" width="29" height="22" border="0" id="habib_contact_us_r11_c6" alt="" /></td>
    <td>
    <?php /*?><img name="habib_contact_us_r11_c7" src="images/habib_contact_us_r11_c7.jpg" width="45" height="22" border="0" id="habib_contact_us_r11_c7" alt="" /><?php */?>

    <input name="btnClear" type="reset" value="Clear" id="btnClear" />

    </td>
    <td><img name="habib_contact_us_r11_c8" src="images/habib_contact_us_r11_c8.jpg" width="42" height="22" border="0" id="habib_contact_us_r11_c8" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="22" border="0" alt="" /></td>
  </tr>
  <tr>
    <td colspan="4"><img name="habib_contact_us_r12_c5" src="images/habib_contact_us_r12_c5.jpg" width="160" height="38" border="0" id="habib_contact_us_r12_c5" alt="" /></td>
    <td><img src="images/spacer.gif" width="1" height="38" border="0" alt="" /></td>
  </tr>
</table>

</body>
</html>

Ответы [ 2 ]

3 голосов
/ 31 октября 2012

Один из способов решения МНОГИХ различий в рендеринге css в браузере (в основном все они визуализируют некоторые фрагменты css-кода по большей части в мелких и тонких деталях) - это следующий метод:

-Это называется Reset Cssздесь я вставляю вам быструю ссылку на некоторые из них:

.explanation: http://www.cssreset.com/what-is-a-css-reset/

.actual resetcss файлы: http://www.cssreset.com/

Что делает Reset Css, так это «сбрасывает» свойства css на «0», это означает, что он говорит всем браузерам стереть свои предпочтения (да, те мелкие и тонкие детали, которые искажают вашCSS здесь и там в каждом браузере), это означает, что он каким-то образом удаляет МНОГИЕ из тех неудобных различий в рендеринге CSS.Мой совет - используйте его.

Как мне использовать это, говорите вы?Легко, просто создайте новый файл CSS с именем «reset.css» и свяжите его, как ваш стандартный CSS, ДО того, как связать свой собственный style.css.Другой способ - просто вставить весь этот код resset css в вашу фактическую таблицу стилей css, просто поверх нее.

И, кстати, плагины, надстройки и т. Д., Для оригинальных африканских жителей imo.

Надеюсь, это помогло.

3 голосов
/ 11 августа 2011

Каждый браузер отображает элементы формы по-разному, некоторые добавляют больше отступов, чем другие, поэтому, хотя предварительный просмотр Dreamweaver может выглядеть великолепно, вам необходимо провести реальное тестирование браузера и, если необходимо, применить специфичные для браузера стили для этих элементов формы, чтобы они соответствуют вашему дизайну. Вам стоит взглянуть на HTML5 Boilerplate Пола Айриша: http://html5boilerplate.com/

Если вам нужна более конкретная помощь с вашим кодом, пожалуйста, напишите что-нибудь, что мы все сможем увидеть и оценить.

...