Вопрос о модели Delphi и CSS - box

#html #css #delphi #wysiwyg #css-position

#HTML #css #delphi #wysiwyg #css-позиция

Вопрос:

Я использую программу на базе Windows, закодированную на Delphi, для создания HTML (и могу ограничить браузер MSIE 7 ).

Мне нужен абсолютный, пиксельный WYSIWYG. Однако у меня возникают проблемы с переносом текста.

Как это выглядит в Delphi

 -- -----------------
| aaaa bbb ccc ddd |
--------------------

выглядит примерно так в браузере (как MS IE, так и FF. Хотя я ориентируюсь только на MSIE, я использую FF, чтобы иметь доступ к FireDebug)

 --------------------
|   aaaa bbb ccc   |
--------------------
ddd

Теперь в Delphi есть инспектор объектов

введите описание изображения здесь

который позволяет мне точно устанавливать верхний / левый / ширину / высоту элемента управления, и при генерации HTML я использую их для позиционирования CSS каждого элемента управления в форме. например

 <fieldset style="position: absolute; top: 56px; left: 32px; width: 185px; height: 13px; ">
  <legend> </legend>
  <div style="position: absolute; top: 0px; left: 0px; width: 179px; height: 13px;">
     Label1 000 111 222 aaa bbb cccc dd
  </div>
</fieldset>

Но поскольку я получаю перенос текста, я предполагаю, что я что-то упускаю из виду, например, настройку полей / border / padding. Какие-нибудь идеи?

Кстати, я использую Arial 10 в качестве шрифта для совместимости с Windows / браузером, поэтому это не должно быть проблемой с размером шрифта.

Я думаю, что Delphi должен иметь что-то похожее на коробочную модель, поскольку он рисует элемент управления с запасом (элемент управления, начинающийся с 0 слева, имеет видимый промежуток слева от формы; если я присвою ему ширину 100 и расположу другой с left = 100, между ними будет видимый промежуток).

Есть идеи, как я собираюсь достичь WYSIWYG? HTML должен отражать макет элемента управления в форме Delphi.

1. Как насчет удаления position: absolute; и width: 179px; height: 13px; в <div style=" теге?

2. Извините, мне это нужно. У меня есть панель (представленная в виде набора полей), которая может содержать несколько элементов управления — в данном случае одну строку текста (TLabel), поэтому панель нуждается в позиционировании, как и ее содержимое.

3. Добавлен тег HTML, чтобы привлечь больше знающих людей; Delphi в основном не имеет значения, как только вы узнаете правильную разметку для того, что вам нужно, вы сможете использовать любой инструмент, чтобы это произошло.

4. есть ли набор полей в форме .. форма имеет отступы по умолчанию и / или поля, если у вас есть форма, они равны нулю, а шрифт явно равен 10 px , может быть, если нет единиц измерения, возникает конфликт?

5. сама легенда приведет к тому, что набор полей будет иметь разную высоту даже между IE7 и 8 — и набор полей имеет разное заполнение по умолчанию в разных браузерах, поэтому попробуйте также обнулить заполнение в нем

Ответ №1:

Попробуйте это, это то, чего вы пытаетесь достичь?

 <html>
<head>
</head>
 <body>
  <form style="margin:0 0 0 0; padding:0 0 0 0;">
   <fieldset style="position: absolute; top: 56px; left: 32px; width: 185px; height: 18px; ">
     <legend></legend>
     <div style="text-align: center; position: absolute; top: 0px; left: 0px; width: 179px; height: 18px;">aaa bbb cccc dd</div>
   </fieldset>
</form>
</html>