A posição absoluta do CSS não funciona no MS Word

Navegue suas respostas
4

Este é um exemplo: 

<html>
<head>
    <title>word test</title>
</head>
<body>
    <div style='position: absolute; width: 30px; height: 50px; top: 100px; left: 20px; border-color: black; border-width: 1px; border-style: solid;'>
        <p>Hello!</p>
    </div>
</body>
</html>

Salve como "word.doc" e abra no MS WORD.

A posição absoluta não funciona!

Div é renderizado na parte superior do documento e com 100% de largura. Por quê? Eu não posso usar tabelas html.

Versão em ms word: 2003

    
por Der Hochstapler 27.05.2010 / 11:01

3 respostas

8

Você pode encontrar uma lista completa do CSS suportado pelo Word 2007 aqui:

link

Sim, é incrivelmente ruim, mas você espera algo mais da equipe do Microsoft Office?

Aqui está uma lista de referência rápida de CSS2 que você não pode usar:

  • azimute
  • anexo de fundo
  • imagem de fundo
  • posição de fundo
  • repetição de segundo plano
  • espaçamento entre bordas
  • bottom
  • lado da legenda
  • claro
  • clipe
  • conteúdo
  • contra-incremento
  • redefinir o contador
  • cue-before, cue-after, cue
  • cursor
  • exibir
  • elevação
  • células vazias
  • float
  • font-size-adjust
  • font-stretch
  • à esquerda
  • quebra de linha
  • list-style-image
  • posição no estilo de lista
  • offset de marcador
  • max-height
  • max-width
  • min-height
  • min-width
  • órfãos
  • estrutura de tópicos
  • cor de contorno
  • estilo de contorno
  • largura do contorno
  • estouro
  • overflow-x
  • estouro-y
  • pausa antes, pausa após, pausa
  • pitch
  • intervalo de arremessos
  • reproduzir durante
  • posição
  • citações
  • riqueza
  • certo
  • fala
  • speak-header
  • speak-numeral
  • pontuação falada
  • taxa de fala
  • estresse
  • layout de tabela
  • text-shadow
  • text-transform
  • top
  • unicode-bidi
  • visibilidade
  • família de voz
  • volume
  • viúvas
  • espaçamento de palavras
  • z-index
por 27.05.2010 / 11:10
1

Provavelmente porque o Microsoft Word usa seu próprio renderizador, o que é uma droga.

Um artigo de 2007 diz ...

No support for float or position

(isso deve se aplicar a você porque sua versão é 2003)

Então você está sem sorte. Infelizmente, os layouts baseados em tabela ainda são comuns em e-mails HTML devido a esse motivo.

    
por 27.05.2010 / 11:04
1

Ok, eu tive o mesmo problema. O que eu fiz foi formatar meu documento html em word e salvá-lo. Então eu mostrei a marcação para o que eu realmente precisava. Você precisa incluir o namespace vml em seu documento html (xmlns: v="urn: schemas-microsoft-com: vml") 

<html xmlns:v="urn:schemas-microsoft-com:vml">

Então você precisa do código a seguir, escolha o ID como quiser, você também pode escolher a posição da imagem mais ou menos livre. A imagem está na frente do texto. 

<!--[if gte vml 1]><v:shape id="Bild_x0020_1" type="#_x0000_t75"
style='position:absolute;left:0;text-align:left;margin-left:338.55pt;
margin-top:26pt;width:105pt;height:138.75pt;z-index:251658240;'>
<v:imagedata src="http://c7.valuewalk.com/wp-content/uploads/2011/12/billg4_web1.jpg"/>
</v:shape><![endif]-->

Embora eu não tenha certeza se isso funciona para o Word 2003, minha versão é 2010.

    
por 02.07.2012 / 19:28

Tags

iPhone, iPad e emulador de BlackBerry para Windows [fechado] Problema com chaves ssh compartilhadas