Question

我有一种情况，我有内联的contenteditable span标签以及其他非contenteditable标签，除IE之外的所有浏览器都可以正常工作。在IE中，标签无法充当内联，并开始强制将自身对齐为块（排序）。我需要一些东西让它们像内联一样。当标签符合要求时，似乎IE正在强迫一些奇怪的行为。

<div class="container">
<span class="text" contenteditable="true">Lorem ipsum dolor </span>
<span class="tag">Tag</span>
<span class="text" contenteditable="true"> sed dignissim maximus mattis </span>
<span class="tag">Tag</span>
<span class="text" contenteditable="true"> vel ex ut nisi elementum tincidunt libero</span>

以下是一个例子： http://jsfiddle.net/glennmicallef/m7tkgo2u/

打开IE和Chrome中的小提琴（例如）以查看差异。

Answer 1

就我而言，我使用了//Column int CreateColumn(HWND hwndLV, int iCol, char* Text, int iBreite) { LVCOLUMN lvc; lvc.mask = LVCF_FMT | LVCF_WIDTH | LVCF_TEXT ; lvc.fmt=LVCFMT_LEFT; lvc.cx = iBreite; lvc.pszText =(LPWSTR)Text; lvc.iSubItem = iCol; return ListView_InsertColumn(hwndLV, iCol, &lvc); } //item int CreateItem(HWND hwndList, char* Text) { LVITEM lvi = {0}; lvi.mask = LVIF_TEXT | LVCFMT_LEFT; lvi.pszText = (LPWSTR)Text; return ListView_InsertItem(hwndList, &lvi); } //Some code ... hwndList = CreateWindow(WC_LISTVIEW , L"" , WS_VISIBLE | WS_CHILD | LVS_REPORT | WS_BORDER | WS_VSCROLL , 10 , 10 ,300 , 200, hwnd, NULL, GetModuleHandle(NULL), 0); SendMessage(hwndList,LVM_SETEXTENDEDLISTVIEWSTYLE,LVS_EX_FULLROWSELECT,LVS_EX_FULLROWSELECT); GetClientRect(hwndList , &rect); CreateColumn(hwndList , 0 , (char*)L"HEADER" , rect.right ); //Some other codes for adding items here ListView_SetColumnWidth(hwndList, 0,200); //Does not change the width和:before伪元素来实现这一目标。

:after

[contenteditable=true]:before {
  content: attr(before-content);
  margin-right: 2px;
}

这使伪元素部分不可编辑，其余部分可编辑。

虽然UX仅在IE上是好的...

内联的contenteditable标签无法在IE中正确对齐

1 个答案: